web-dev-qa-db-ja.com

HTML5ビデオがSafariで機能しない

私の個人サイトのビデオがサファリで再生されていないことに気づきました。 2台のコンピューターを試しましたが、[再生]をクリックしても何も起こりません。 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>
htmlvideosafarihtml5-video
4
Will Ryan

通常、これは、コーデックのネストされた二重引用符を使用して、type属性を一重引用符で囲むことで機能します。ただし、クロスブラウザでは機能しない場合があります。そのため、コーデックのtype属性に二重引用符と一重引用符を入れ子にして混在させる必要がない場合があります。

一重引用符で囲まれた二重引用符なしで試してみます。そして、引用符を1つだけ使用します。

これを変換します：

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要素に関するWHATWGWebサイト。 type要素のsource属性のWHATWGで、例を見ると、引用符がネストされているものとされていないものがあります。

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

MDN Webサイト、HTML5オーディオおよびビデオの使用：

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

したがって、一重引用符または二重引用符を使用しますが、ブラウザ間で機能しない場合があるため、どちらかまたは相互にネストしないでください。

6
Jonathan Marzullo