Video tag not working in Safari now

问题

The code below makes the video tag work in IE9, Chrome and Firefox. However I cant get it to work in Safari

<video width="400" height="300" controls="controls" poster="ContractorTestingVideos/cntrtest1.jpg">
  <source src="http://1.1.1.1/Intranet/ContractorTestingVideos/cntrtest1.ogg" type="video/ogg; codecs='theora, vorbis'"></source>
  <source src="http://1.1.1.1/Intranet/ContractorTestingVideos/cntrtest1.ogg" type="video/webm; codecs='vp8, vorbis'"></source>
  <source src="http://1.1.1.1/Intranet/ContractorTestingVideos/cntrtest1.m4v" type="video/x-m4v"></source>
  <source src="http://1.1.1.1/Intranet/ContractorTestingVideos/cntrtest1.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"></source>
</video>

So for Safari, I tried this,

<video width="400" height="300" controls="controls" poster="ContractorTestingVideos/cntrtest1.jpg" src="http://1.1.1.1/Intranet/ContractorTestingVideos/cntrtest1.mp4"></video>

Still doesn't work. I did paste the url directly into a Safari address bar and it did bring back the video and play it.

Any ideas on how to get the html5 video tag to work in safari? My Safari build is 5.0.5(7533.21.1) and I am working on a 64 bit virtual machine, OS is Windows 7

回答1:

Try rearranging your list of video sources to that your .mp4 videos come first. For some reason, I've never been able to get a video to play on Mobile Safari, and rarely on desktop Safari, without doing that.

Like this:

<video width="400" height="300" controls="controls" poster="ContractorTestingVideos/cntrtest1.jpg">
  <source src="http://1.1.1.1/Intranet/ContractorTestingVideos/cntrtest1.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"></source>
  <source src="http://1.1.1.1/Intranet/ContractorTestingVideos/cntrtest1.ogg" type="video/ogg; codecs='theora, vorbis'"></source>
  <source src="http://1.1.1.1/Intranet/ContractorTestingVideos/cntrtest1.ogg" type="video/webm; codecs='vp8, vorbis'"></source>
  <source src="http://1.1.1.1/Intranet/ContractorTestingVideos/cntrtest1.m4v" type="video/x-m4v"></source>
</video>

回答2:

MP4 is supported by Safari Desktop but you need Quicktime installed to make it work which is a no-no, you cant force your clients to install quicktime..

you better think about a flash fallback, include this into your video tag

 <object type="application/x-shockwave-flash" data="video/video.swf" id="video_background">
    <param name="movie" value="video/video.swf" /></object>

NOTE: iOS doesnt all the profiles that h.264 provides

Source: HTML5 mp4 video working in Chrome and Desktop Safari but not iPhone

来源：https://stackoverflow.com/questions/7982252/video-tag-not-working-in-safari-now