Question

以下代码使视频标签可在IE9，Chrome和Firefox中使用。但是我无法在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>

所以对于Safari，我试过了，

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

仍然无效。我确实将网址直接粘贴到Safari地址栏中，它确实带回了视频并进行播放。

有关如何让html5视频标签在Safari中运行的任何想法？我的Safari版本是5.0.5（7533.21.1），我正在使用64位虚拟机，操作系统是Windows 7

Answer 1

尝试重新排列视频源列表，以便您的.mp4视频首先出现。出于某种原因，我从来没有能够在Mobile Safari上播放视频，而且很少在桌面Safari上播放，而没有这样做。

像这样：

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

Answer 2

Safari桌面支持MP4，但你需要安装Quicktime才能让它工作，这是禁止的，你不能强迫你的客户快速安装..

你最好考虑闪回后备，将其包含在你的视频标签中

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

注意：iOS并不是h.264提供的所有配置文件

来源： HTML5 mp4 video working in Chrome and Desktop Safari but not iPhone

Answer 3

//https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari
<picture>
    <source srcset="explosion.mp4" type="video/mp4">
    <img src="explosion.jpg" alt="An image of an explosion.">
</picture>

//it sove your issue, it work only in safari
//to check browser is safari or not use 
// this if condition
// if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0)

视频标记现在无法在Safari中使用

3 个答案: