web-dev-qa-db-ja.com

HTML5ビデオソースタイプ属性でHEVCコーデックを指定するにはどうすればよいですか？

（元々 スタックオーバーフロー ）

HEVCでエンコードされたより小さなビデオを、それをサポートするWebブラウザーにロードして再生したいと思います。

HEVC形式をサポートするSafari 11（macOS 10.13）でこのコードを使用しています。

<video muted playsinline autoplay>
    <source src="clip.webm" type="video/webm; codecs=vp9">
    <source src="clip-hevc.mp4" type="video/mp4; codecs=hevc">
    <source src="clip.mp4" type="video/mp4; codecs=avc1">
    <p>Video not supported</p>
</video>

Web Inspector> Network Panelで、Safariがclip.mp4とclip-hevc.mp4の両方をロードしていることがわかります。ビデオ要素を調べると、clip.mp4ではなく、clip-hevc.mp4が再生されていることがわかります。 iOS 11でも同じことがわかります。

指定したタイプで HTMLMediaElement.canPlayType() を呼び出すと、

  • maybe on video/mp4; codecs=hevc
  • probably on video/mp4; codecs=avc1
  • 私が見たHEVCコーデックのバリアントには何もありません（たとえば、hvc1、hev1）

他に気づいたこと：clip.mp4オプションを削除すると、clip-hevc.mp4がダウンロードされて正常に再生されます！

サポートされているMP4バリアントのみがブラウザでダウンロードおよび再生されるようにするにはどうすればよいですか？

html5videosafari
3
nfrasser

ここにある可能性が高い問題は、.hecv以外のビデオを2番目に注文したことです

<source src="clip-hevc.mp4" type="video/mp4; codecs=hevc">
    <source src="clip.mp4" type="video/mp4; codecs=avc1">

これはおそらく、ブラウザにclip-hevc.mp4をロードし、次にclip.mp4をロードするようにブラウザに指示している可能性があります。

逆の方法で注文すると、おそらくブラウザにclip.mp4をロードしてから、代わりにclip.hevc.mp4をロードするように指示します。

  <source src="clip.mp4" type="video/mp4; codecs=avc1">
   <source src="clip-hevc.mp4" type="video/mp4; codecs=hevc">

それがあなたが遭遇しているグリッチな問題だと思います。 clip-hevcを一番下に並べ替えると、可能であればhevcがロードされる可能性があります。

ただし、ブラウザと互換性がない場合、hevcが読み込まれないことは保証できません。 hecvをサポートしないデバイスでテストし、代わりにclip.mp4をロードするかどうかを確認することをお勧めします。

ブラウザと互換性のあるコーデックを確認する方法もあります。次に例を示します。

var testEl = document.createElement( "video" ),
    mpeg4, h264, ogg, webm;
if ( testEl.canPlayType ) {
    // Check for MPEG-4 support
    mpeg4 = "" !== testEl.canPlayType( 'video/mp4; codecs="mp4v.20.8"' );

    // Check for h264 support
    h264 = "" !== ( testEl.canPlayType( 'video/mp4; codecs="avc1.42E01E"' )
        || testEl.canPlayType( 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' ) );

    // Check for Ogg support
    ogg = "" !== testEl.canPlayType( 'video/ogg; codecs="theora"' );

    // Check for Webm support
    webm = "" !== testEl.canPlayType( 'video/webm; codecs="vp8, vorbis"' );
}
1
Michael d