简体   繁体   中英

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. I have the video in .mp4 and .ogv format. Here is a test page that I have set up with the video:

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

Here is the relevant html code that I used to embed the video:

<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).

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. However, if I copy and paste the video URL into the Firefox address bar, the video plays fine. Here a the direct link to the .ogv-format video:

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.

What I know about the issue:

I know that plenty of people have had trouble with html5 video and Firefox. And I also know from reading other questions that in some cases, the server is sending an incorrect mime type. 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. Note that I also tried converting to .webm as an alternative to .ogv but that didn't solve the issue.

About the video

The video was created in Python and and Matplotlib. I used Matplotlib to save the video to .mp4 and then I used ffmpeg to convert the video to .ogv format. Here is the ffmpeg command I used:

$ 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.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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