HTML5 视频在 Safari 中不起作用
Posted
技术标签:
【中文标题】HTML5 视频在 Safari 中不起作用【英文标题】:HTML5 videos not working in Safari 【发布时间】:2016-02-23 06:45:13 【问题描述】:我刚刚注意到我个人网站上的视频没有在 Safari 中播放。我试过两台电脑,点击播放没有任何反应。它们在 Chrome、Opera 和 Firefox 中运行良好,但在 safari 中却不行。是编解码器/编码问题吗?
链接:http://imwillryan.com/uiuc-timelapse.html
代码:
<video controls preload="none" poster="assets/video/poster_uiuc-timelapse.jpg" data-setup="">
<source src="assets/video/uiuc-timelapse.mp4" type="video/mp4" />
<source src="assets/video/uiuc-timelapse.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="assets/video/uiuc-timelapse.webm" type='video/webm; codecs="vp8, vorbis"' />
Your browser does not support the HTML5 video tag. Try updating your browser or using a different one.
</video>
【问题讨论】:
【参考方案1】:通常,这将适用于在 type
属性周围加上单引号,并为编解码器嵌套双引号。但有时这不会跨浏览器工作。因此,有时您不需要为编解码器的type
属性嵌套和混合双引号/单引号。
我会尝试在单引号中不使用嵌套双引号。并且只使用一个引号。
转换这个:
type='video/ogg; codecs="theora, vorbis"'
type='video/webm; codecs="vp8, vorbis"'
在没有用于编解码器的双引号和单引号的嵌套混合的情况下:
type="video/ogg; codecs=theora, vorbis"
type="video/webm; codecs=vp8, vorbis"
所有在一起,像这样:
<video controls preload="none" poster="assets/video/poster_uiuc-timelapse.jpg" data-setup="">
<source src="assets/video/uiuc-timelapse.mp4" type="video/mp4" />
<source src="assets/video/uiuc-timelapse.ogv" type="video/ogg; codecs=theora, vorbis" />
<source src="assets/video/uiuc-timelapse.webm" type="video/webm; codecs=vp8, vorbis" />
Your browser does not support the HTML5 video tag. Try updating your browser or using a different one.
</video>
参考文献
source
元素上的 WHATWG 网站。在 source
元素的 type
属性的 WHATWG 中,查看示例,您会看到一些有嵌套引号,而另一些则没有。
https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element
MDN网站,使用HTML5音视频:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
所以要么使用单引号,要么使用双引号,但不要嵌套或相互嵌套,因为有时它可能无法跨浏览器工作。
【讨论】:
以上是关于HTML5 视频在 Safari 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
HTML5 视频播放/暂停控件仅在 Safari 浏览器中不起作用
Javascript HTML5 play() 在 ios9 Safari 中不起作用?