HTML5视频无法在Safari中使用 [英] HTML5 videos not working in Safari

问题描述

我刚刚注意到，我个人网站上的视频并非在Safari中播放。我试过两台电脑，点击播放什么都不做。它们可以在Chrome，Opera和Firefox中正常运行，但不适用于Safari。它是编解码器/编码问题吗？

链接： http://imwillryan.com/ uiuc-timelapse.html

代码：

  < video controls preload =noneposter =assets / video / poster_uiuc-timelapse.jpgdata-setup ={}> 
< source src =assets / video / uiuc-timelapse.mp4type =video / mp4/> 
< source src =assets / video / uiuc-timelapse.ogvtype ='video / ogg; codecs =theora，vorbis'/> 
< source src =assets / video / uiuc-timelapse.webmtype ='video / webm; codecs =vp8，vorbis'/> 
您的浏览器不支持HTML5视频标签。尝试更新您的浏览器或使用其他浏览器。 
< / video> 
  

解决方案

通常情况下， 键入属性，并为编解码器嵌套双引号。但有时这不会跨浏览器工作。所以有时你不需要为编解码器的类型属性嵌套和混合双/单引号。

我会尝试没有在单引号嵌套双引号。

转换此：

  type = 视频/ 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 =noneposter =assets / video / poster_uiuc-timelapse.jpgdata-setup ={}> 
< source src =assets / video / uiuc-timelapse.mp4type =video / mp4/> 
< source src =assets / video / uiuc-timelapse.ogvtype =video / ogg; codecs = theora，vorbis/> 
< source src =assets / video / uiuc-timelapse.webmtype =video / webm; codecs = vp8，vorbis/> 
您的浏览器不支持HTML5视频标签。尝试更新您的浏览器或使用其他浏览器。 
< / video> 
  

参考资料

WHATWG网站 source 元素。在类型属性的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

因此，无论是使用单引号还是双引号，但不要嵌套或彼此嵌套，因为有时它可能无法跨浏览器工作。

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?

Link: 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>

解决方案

Usually that will work with having a single quote around the type attribute 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 type attribute for codecs.

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 source element. On WHATWG for the type attribute for source element, look at the examples and you will see some have nested quotes and some don't.

https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element

MDN website, 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.

这篇关于HTML5视频无法在Safari中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！