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>

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元素.关于元素type属性的WHATWG source,查看示例,你会看到一些有嵌套引号,有些则没有.

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

因此要么使用单引号,要么使用双引号但不要嵌套或相互嵌套,因为有时它可能无法跨浏览器工作.