简体   繁体   English

HTML5视频无法在OS X的Firefox浏览器中正常播放

[英]HTML5 video not playing properly in Firefox browser on OS X

The issue: 问题:

I recently made a video that I would like to embed in my website as html5 video. 我最近制作了一个视频,希望将其作为html5视频嵌入到我的网站中。 I have the video in .mp4 and .ogv format. 我有.mp4和.ogv格式的视频。 Here is a test page that I have set up with the video: 这是我通过视频设置的测试页:

http://www.briancjenkins.com/video_test/ http://www.briancjenkins.com/video_test/

Here is the relevant html code that I used to embed the video: 这是我用来嵌入视频的相关html代码:

<video width="75%" controls loop poster="US_Inflation_Unemployment_Monthly_BP_Filtered.png">
  <source src="US_Inflation_Unemployment_Monthly_BP_Filtered.mp4" type="video/mp4">
  <source src="US_Inflation_Unemployment_Monthly_BP_Filtered.ogv" type="video/ogg">
  Your browser does not support the video tag.
</video>

The video plays perfectly on Safari (iOS and OS X), Chrome (OS X), and Firefox (iOS). 该视频可以在Safari(iOS和OS X),Chrome(OS X)和Firefox(iOS)上完美播放。

However, the video does not play properly in Firefox on OS X. On both my desktop and laptop, when I play the video, the time bar moves, but there is no video. 但是,该视频无法在OS X上的Firefox中正常播放。在我的台式机和笔记本电脑上,当我播放视频时,时间栏都会移动,但是没有视频。 However, if I copy and paste the video URL into the Firefox address bar, the video plays fine. 但是,如果我将视频URL复制并粘贴到Firefox地址栏中,则视频可以正常播放。 Here a the direct link to the .ogv-format video: 这是.ogv格式视频的直接链接:

http://www.briancjenkins.com/video_test/US_Inflation_Unemployment_Monthly_BP_Filtered.ogv http://www.briancjenkins.com/video_test/US_Inflation_Unemployment_Monthly_BP_Filtered.ogv

I would like to know why the video is not playing in Firefox on OS X and how to fix the problem. 我想知道为什么视频无法在OS X的Firefox中播放以及如何解决该问题。

What I know about the issue: 我对这个问题的了解:

I know that plenty of people have had trouble with html5 video and Firefox. 我知道很多人在使用html5视频和Firefox时遇到了麻烦。 And I also know from reading other questions that in some cases, the server is sending an incorrect mime type. 我还从阅读其他问题中知道,在某些情况下,服务器发送的Mime类型错误。 I ran: 我跑了:

$ curl -I http://www.briancjenkins.com/video_test/US_Inflation_Unemployment_Monthly_BP_Filtered.ogv

and found that this does not seem to be the case here: 并发现这里似乎不是这样:

Server: GitHub.com
Content-Type: video/ogg

which isn't too surprising since Firefox will play the video hosted by Github, just not when its embedded in a webpage. 这并不奇怪,因为Firefox 播放Github托管的视频,而不会嵌入网页中。 Note that I also tried converting to .webm as an alternative to .ogv but that didn't solve the issue. 请注意,我还尝试了将.webm转换为.ogv的替代方法,但这并不能解决问题。

About the video 关于视频

The video was created in Python and and Matplotlib. 该视频是使用Python和Matplotlib创建的。 I used Matplotlib to save the video to .mp4 and then I used ffmpeg to convert the video to .ogv format. 我使用Matplotlib将视频保存为.mp4,然后使用ffmpeg将视频转换为.ogv格式。 Here is the ffmpeg command I used: 这是我使用的ffmpeg命令:

$ ffmpeg -i US_Inflation_Unemployment_Monthly_BP_Filtered.mp4 -acodec libvorbis -ac 2 -ab 128k -ar 44100 -b:v 1800k  US_Inflation_Unemployment_Monthly_BP_Filtered.ogv

It's possible that I am not doing the conversion correctly, but I have tried several different variations on the conversion command. 我可能没有正确执行转换,但是我尝试了转换命令的几种不同变体。 The video in question is hosted by Github. 该视频由Github托管。

更新:似乎当前版本的Firefox中的问题已解决。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM