明滅するプログラマの思索

WEBエンジニアとして勤務している一介の男が、日々気づいたことをまとめるブログです

ストリーミング動画のプレイリストを非同期に切り替える

3つ目の HLS(HTTP Live Streaming)ネタです。
HLSプレイリストをPCで再生する場合、video.js ライブラリを利用すると楽です。

<html>
<head>
<link href="https://vjs.zencdn.net/6.2.7/video-js.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="movie_content_cap">
  <video id="player" class="video-js vjs-default-skin" height="404" width="720" controls poster="./st_capture.jpg">
  <source id="player_source" src="st.m3u8" type="application/x-mpegURL" />
</video>

<script src="https://vjs.zencdn.net/6.2.7/video.js"></script>
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.10.1/videojs-contrib-hls.js"></script>

<script>
$(function() {
  videojs.options.flash.swf = 'https://unpkg.com/videojs-swf@5.4.0/dist/video-js.swf';
  var player = videojs('player');
  $('#player').on('touchstart mousedown', function(e) {
    e.preventDefault();
    player.play();
  });
});
</script>

jQuery を利用しています。

上記のサンプルでは、video.js および videojs-contrib-hls.js を取り込んで HLS ストリーミングに対応させています。
ここで、ストリーミングのプレイリストを st.m3u8 から別のファイルに切り替える方法を以下に記載します。

<html>
<head>
<link href="https://vjs.zencdn.net/6.2.7/video-js.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="movie_content_cap">
  <video id="player" class="video-js vjs-default-skin" height="404" width="720" controls poster="./st_capture.jpg">
  <source id="player_source" src="st.m3u8" type="application/x-mpegURL" />
</video>

<div id="switch" data-playlist="st2.m3u8">切り替えボタン</div>

<script src="https://vjs.zencdn.net/6.2.7/video.js"></script>
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.10.1/videojs-contrib-hls.js"></script>

<script>
$(function() {
  videojs.options.flash.swf = 'https://unpkg.com/videojs-swf@5.4.0/dist/video-js.swf';
  var player = videojs('player');
  $('#player').on('touchstart mousedown', function(e) {
    e.preventDefault();
    player.play();
  });
  $('#switch').on('click', function(e) {
    e.preventDefault();
    player.src({src:$(this).data('playlist'), type: 'application/x-mpegURL'});
    player.play();
  });
});
</script>

player のインスタンスで src() メソッドを呼び出し、プレイリストのURIとContent-TypeをJSONデータにして渡します。
これだけで切り替わります。