Question

我有一个使用bootstrap构建的网站，并在对话框中加载视频：

<video width="760" style="background-color: white;" preload controls autoplay>
    <source src="....." type="video/mp4" />
</video>

在IE，Chrome和Safari中显示并正常运行。在Firefox中，自动播放工作了几次，现在根本不起作用。使用控件手动控制台和视频中的错误都不会很好。

我也尝试过脚本方法（没有自动播放属性）：

oncanplay="$(this)[0].play()"

除了Firefox之外，所有浏览器都可以正常运行。

任何人都可以看到可能出错的地方吗？

Answer 1

我已经在所有浏览器上测试了它与javascript事件的完美结合

<video onloadeddata="this.play();" poster="poster.png" playsinline loop muted controls>
    <source src="video.mp4" type="video/mp4" />
    <source src="video.mp4.webm" type="video/webm" />
    <source src="video.mp4.ogg" type="video/ogg" />
    Your browser does not support the video tag or the file format of this video.
</video>

Answer 2

问题有一个简单的解决方案：更改视频的顺序，首先列出.mp4来源，然后列出.webm来源，自动播放视频Firefox，Explorer和Chrome，如果您有多个视频源，这当然有效。

附注：Firefox在Windows 7及更高版本21之后支持H.264。如果安装了相应的H.264插件，Firefox自版本26起就支持Linux上的gstreamer。对Firefox的部分支持是指OSX和OSX缺乏支持。一些Linux平台，对于Android Firefox，它指的是无法实现硬件加速。

Answer 3

Firefox视频问题：疑难解答

确保服务器使用正确且受支持的MIME类型发送视频文件，以使其在Firefox中正常运行。

link
使用相对于ROOT的源URL，而不是网页

例如：src =＆＃34; /complete/folder/path/video.ogv"
mozilla的版本。
- Mozilla Firefox（3.5及更高版本）在Ogg容器中支持Theora视频和Vorbis音频。
- Firefox 4支持WebM。
link

Answer 4

首先检查您的网页以进行测试

http://html5test.com/

第二次通过代码检查员检查并在浏览器中输入它们以检查其是否正常工作。或者将视频文件拖放到浏览器上以检查其是否正常工作。

第三次尝试检查MIME类型

AddType video/mp4 for .mp4 .m4v
AddType video/ogg for .ogv
AddType video/webm for .webm

第四次检查你的html5转换器它经常出现格式转换问题我在工作html5视频时遇到了同样的问题。改变它为我解决了问题。

最后但并非最不重要;添加闪光灯后备！

<object type="application/x-shockwave-flash" 
data="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"
height="227" width="220">

祝你好运！

Answer 5

这对于firefox浏览器很有效，但必须将其静音。

<video
   width="100%"
   height="100%"
   onloadedmetadata="this.muted = true"
   autoplay
>
   <source src="assets/videos/Helpline_Video.mp4" type="video/mp4" />
</video>

Answer 6

在Firefox 66及更高版本中，必须单击浏览器栏右侧的“取消阻止”按钮才能取消阻止自动播放视频和音频

HTML视频自动播放在Firefox中不起作用

6 个答案: