はじめに

こんにちは streampack チームのメディです。
https://cloudpack.jp/service/option/streampack.html

Copyrights

Elephants Dream
© copyright Blender Foundation | https://orange.blender.org

目的

HLSビデオでデフォルトのオーディオトラックを設定する方法を学びます。

ツール

VideoJS：オープンソースのJavaScriptビデオプレーヤー。

説明

マニフェストについて

複数のオーディオトラックを持つHLSマニフェストの例。

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="Chinese",FORCED=NO,AUTOSELECT=YES,URI="chinese/ed.ttml",LANGUAGE="zho"
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="French",FORCED=NO,AUTOSELECT=YES,URI="french/ed.ttml",LANGUAGE="fra"
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="aac",LANGUAGE="en",NAME="English",DEFAULT=YES,AUTOSELECT=YES,URI="en/chunklist_w370587926_b160000_ao_slen_t64RW5nbGlzaA==.m3u8"
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="aac",LANGUAGE="sp",NAME="Spanish",DEFAULT=NO,AUTOSELECT=YES,URI="sp/chunklist_w370587926_b160000_ao_slsp_t64U3BhbmlzaA==.m3u8"
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="aac",LANGUAGE="en",NAME="Commentary (eng)",DEFAULT=NO,AUTOSELECT=NO,URI="com/chunklist_w370587926_b160000_ao_slen_t64Q29tbWVudGFyeSAoZW5nKQ==.m3u8"
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2962000,NAME="High",CODECS="avc1.66.30",RESOLUTION=1280x720,AUDIO="aac",SUBTITLES="subs"
1280/chunklist_w370587926_b2962000_vo_slen_t64TWFpbg==.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1427000,NAME="Medium",CODECS="avc1.66.30",RESOLUTION=768x432,AUDIO="aac",SUBTITLES="subs"
768/chunklist_w370587926_b1427000_vo_slen_t64TWFpbg==.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=688000,NAME="Low",CODECS="avc1.66.30",RESOLUTION=448x252,AUDIO="aac",SUBTITLES="subs"
448/chunklist_w370587926_b688000_vo_slen_t64TWFpbg==.m3u8

上記のマニフェストでは、英語がデフォルトのオーディオトラックです。

#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="aac",LANGUAGE="en",NAME="English",DEFAULT=YES,AUTOSELECT=YES,URI="en/chunklist_w370587926_b160000_ao_slen_t64RW5nbGlzaA==.m3u8"

ビデオイベントについて

HLSマニフェストが読み込まれた後、オーディオトラックを選択する必要があります。
ブラウザによって、トリガーされるイベントは異なります。
たとえば、ChromeとFireFoxではloadedmetadataをリッスンする必要があり、Safariでは canplayをリッスンする必要があります。

実装

次の例では、スペイン語をデフォルトのオーディオトラックとして設定しています。

マニフェストでは、次のオーディオトラックです。

#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="aac",LANGUAGE="en",NAME="English",DEFAULT=YES,AUTOSELECT=YES,URI="en/chunklist_w370587926_b160000_ao_slen_t64RW5nbGlzaA==.m3u8"

<!DOCTYPE html>
<html>

<head>
  <title>Videojs 7.8.3 + multi audio</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/video.js/7.8.3/video-js.min.css" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/video.js/7.8.3/video.min.js"></script>
</head>

<body>
  <video class="video-js vjs-default-skin" id="video-container" controls muted autoplay>
    <source src="//cdn.theoplayer.com/video/elephants-dream/playlist.m3u8" type="application/x-mpegURL">
  </video>
</body>
<script>
  var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
  var options = {
    fluid: true
  };
  var player = videojs("video-container", options);
  if (isSafari) {
    player.one("canplay", function() {
      activateTrack();
    });
  } else {
    player.one("loadedmetadata", function() {
      activateTrack();
    });
  }

  function activateTrack() {
    try {
      var audioTrackList = player.audioTracks()
      for (var i = 0; i < audioTrackList.length; i++) {
        var track = audioTrackList[i];
        if (track.label == "Spanish") {
          track.enabled = true;
        }
      }
    } catch (e) {
      console.log("ERROR: " + e);
    }
  }
</script>

</html>

情報源

https://docs.videojs.com/docs/api/player.html

サンプルビデオはtheoplayerからです。

元記事はこちら

「JavaScriptビデオプレーヤーのHLSストリームでデフォルトのオーディオトラックを選択します」