HTML5视频在Safari中无法工作

Question

我刚刚发现我的个人网站上的视频无法在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>

- Will Ryan

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

参考资料

WHATWG关于source元素的网站。在WHATWG中，关于source元素的type属性，请查看示例，您会发现有些嵌套引号，而有些则没有。

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

因此，要么使用单引号，要么使用双引号，但不要相互嵌套，因为有时它可能在跨浏览器方面无法正常工作。

- Jonathan Marzullo