Html HTML5 视频在 Safari 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33832452/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 videos not working in Safari
提问by Will Ryan
I just noticed that videos on my personal site aren't playing in safari. I've tried two computers and clicking play does nothing. They work fine in Chrome, Opera, and Firefox, but not in safari. Is it a codec/encoding issue?
我刚刚注意到我个人网站上的视频无法在 safari 中播放。我试过两台电脑，点击播放没有任何反应。它们在 Chrome、Opera 和 Firefox 中运行良好，但不适用于 safari。这是编解码器/编码问题吗？
Link: http://imwillryan.com/uiuc-timelapse.html
链接：http: //imwillryan.com/uiuc-timelapse.html
Code:
代码：
<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>
回答by Jonathan Marzullo
Usually that will work with having a single quote around the typeattribute with nested double quotes for the codec. But sometimes that will not work cross browser. So sometimes you don't need to nest and mix double / single quotes for the typeattribute for codecs.
通常这将适用于在type带有嵌套双引号的属性周围加上用于编解码器的单引号。但有时这将无法跨浏览器工作。因此，有时您不需要type为编解码器的属性嵌套和混合双引号/单引号。
I would try it without the nested double quotes in the single quote. And just use one quote.
我会在单引号中没有嵌套双引号的情况下尝试。只需使用一个报价。
Convert this:
转换这个：
type='video/ogg; codecs="theora, vorbis"'
type='video/webm; codecs="vp8, vorbis"'
Into this without the nested mix of double and single quotes for codec:
进入这个没有用于编解码器的双引号和单引号的嵌套组合：
type="video/ogg; codecs=theora, vorbis"
type="video/webm; codecs=vp8, vorbis"
And all together, like this:
总之，就像这样：
<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>
References
参考
WHATWG website on sourceelement. On WHATWG for the typeattribute for sourceelement, look at the examples and you will see some have nested quotes and some don't.
WHATWG 网站上的source元素。在元素type属性的WHATWG 上source，查看示例，您会看到有些有嵌套的引号，有些没有。
https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element
https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element
MDN website, Using HTML5 audio and video:
MDN 网站，使用 HTML5 音频和视频：
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
So either use single quotes or double quotes but don't nest either or in each other, since sometimes it might not work cross browser.
因此，要么使用单引号，要么使用双引号，但不要相互嵌套或嵌套，因为有时它可能无法跨浏览器工作。
