在 HTML 中的 div 中播放视频

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14566303/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 05:18:21  来源:igfitidea点击:

Play video in a div in HTML

html

提问by Calm Sea

I'm trying to play a video in a div tag in html but when I used the following code, the browser asked if I want to download the video. I do not want to download it, I just want to play it. Also this message appeared in the div

我正在尝试在 html 的 div 标签中播放视频,但是当我使用以下代码时,浏览器询问我是否要下载视频。我不想下载它,我只想玩它。此消息也出现在 div 中

"You need to install an extension to view this content"

“您需要安装扩展程序才能查看此内容”

I'm using firefox browser

我正在使用火狐浏览器

This what I used in html file :

这是我在 html 文件中使用的:

<div>
<object type="Brave/quicktime" data="Brave.avi" width="624" height="352">
<param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
<param name="controller" value="false" />
<param name="autoplay" value="true" />
</object>
</div> 

回答by zazvorniki

Try using the video tag

尝试使用视频标签

 <div>
   <video width="700" height="450" controls="controls" poster="image" preload="true">
     <source src="where the video is" type="video/mov"/>
     <source src="where the video is" type="video/mp4" />
     <source src="where the video is" type="video/oog" />
     Your browser does not support the video tag.
   </video>
</div>

You also need to use a different video type. AVI file types are not supported in the html5 video tag.

您还需要使用不同的视频类型。html5 视频标签不支持 AVI 文件类型。

回答by Matt Stephens

Try this

尝试这个

<video width="624" height="352" controls>
<source src="Brave.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Also i wouldn't use AVI as the format for the video.

此外,我不会使用 AVI 作为视频格式。

Use MP4 then you can use the HTML5 video tag.

使用 MP4 然后你可以使用 HTML5 视频标签。

回答by Jules

Your main problem is that you're using an invalid MIME type (as you've pointed out yourself, the browser returns an "invalid MIME type" message). You're also using the <object>tag, which is deprecated as of HTML5.

您的主要问题是您使用了无效的 MIME 类型(正如您自己指出的那样,浏览器返回“无效的 MIME 类型”消息)。您还使用了<object>自 HTML5 起已弃用的标记。

Before using up-to-date markup, make sure your DOCTYPEdeclaration reads, <DOCTYPE html>, and nothing more. This tells the browser that you're using an HTML5 document, and that the proper tag definitions should be loaded. If you declare an HTML4 DOCTYPE, your browser might not be able to process HTML5 tags.

在使用最新的标记之前,请确保您的DOCTYPE声明内容为 、<DOCTYPE html>,仅此而已。这告诉浏览器您正在使用 HTML5 文档,并且应该加载正确的标签定义。如果您声明 HTML4 DOCTYPE,您的浏览器可能无法处理 HTML5 标签。

Once that's done, use the <video>tag. Now, your markup should look something like this:

完成后,使用<video>标签。现在,您的标记应如下所示:

<DOCTYPE html>
<html>
    <head>
    <!-- your styles, scripts, and other head info -->
    </head>

    <body>
        <video src="Brave.avi" controls="yourControls" autoplay="false">
        Your browser doesn't support the `<video>` tag. /*this is a fallback*/
        </video>
    </body>
<html>

You'll notice that there's no typeattribute for the <video>tag. That's because the <video>tag doesn't actually support that attribute. This makes for less coding, which is always a good thing.

您会注意到标签没有type属性<video>。这是因为<video>标签实际上不支持该属性。这使得编码更少,这总是一件好事。

On a side note, avoid using the .aviformat. The h264 codec just became an official standard, which means that using .mp4, or even the oft-neglected .oggformat are preferable, as they use less bandwidth, and are more widely supported.

附带说明一下,请避免使用该.avi格式。h264 编解码器刚刚成为官方标准,这意味着使用.mp4,甚至经常被忽视的.ogg格式是更可取的,因为它们使用更少的带宽,并且得到更广泛的支持。