视频标签现在在 Safari 中不起作用

Posted 2023-05-07

【中文标题】视频标签现在在 Safari 中不起作用

【英文标题】：Video tag not working in Safari now

【发布时间】：2011-12-20 09:38:13

【问题描述】：

下面的代码使 video 标签在 IE9、Chrome 和 Firefox 中工作。但是我不能让它在 Safari 中工作

<video   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   controls="controls" poster="ContractorTestingVideos/cntrtest1.jpg" src="http://1.1.1.1/Intranet/ContractorTestingVideos/cntrtest1.mp4"></video>

还是不行。我确实将 url 直接粘贴到 Safari 地址栏中，它确实带回了视频并播放了它。

关于如何让 html5 视频标签在 safari 中工作的任何想法？ 我的 Safari 版本是 5.0.5(7533.21.1)，我正在使用 64 位虚拟机，操作系统是 Windows 7

【参考方案1】：

尝试重新排列您的视频源列表，让 .mp4 视频排在第一位。出于某种原因，如果不这样做，我就无法在 Mobile Safari 上播放视频，而且很少在桌面 Safari 上播放。

像这样：

<video   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】：

Safari Desktop 支持 MP4，但您需要安装 Quicktime 才能使其工作，这是一个禁忌，您不能强迫您的客户安装 quicktime..

您最好考虑使用 Flash 后备，将其包含在您的视频标签中

 <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

【讨论】：

那个项目是三年前的。有趣的是，在我开始工作后，他们没有使用视频，而是转到了我使用 jquery 插件处理的幻灯片。但是，如果您对我正在处理的另一个项目非常及时的回应。我标记了你的答案，希望任何阅读这篇文章的人都会在他们的解决方案中包含你的贡献

【参考方案3】：

//https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari
<picture>
    <source srcset="explosion.mp4" type="video/mp4">
    <img src="explosion.jpg" >
</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)