こちらの記事（https://financial-pharmacist.blogspot.com/2020/09/hlsjspart1.html ）の続きです。
前回は、mp4形式の動画ファイルをライブストリーミング配信で使えるm3u8形式の動画に変換しました。
今回はそのファイルをhls.jsというライブラリを使ってウェブページに実装してみます。
ドキュメントはこちら https://openbase.io/js/hls.js/documentation
hls.jsの読み込み
まずはCDNを<head></head>内に追記します。
<script src="https://cdn.jsdelivr.net/npm/hls.js@0.14.11/dist/hls.min.js" integrity="sha256-/pGUxeVXPVmvwMFyXJoWLBAXtfup/sfv3fmV8ACMog0=" crossorigin="anonymous"></script>コーディング
html部分
<video id="video" controls style="width: 400px;height: 225px; margin: 10%;"></video><video>タグで動画プレイヤーや表示されるところを指定します。今回はid="video"内の動画を表示します。controlsと書いておくと、プレイヤーに再生ボタンやシークバーが表示されます。 サイズはpxでしか指定できないようです。
javascript部分
<script>
var video = document.getElementById('video');
var videoSrc = './video/prog_index.m3u8';//ここに前編でつくったm3u8ファイルのパスを指定します
//
// First check for native browser HLS support
//
if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoSrc;
video.addEventListener('loadedmetadata', function() {
video.play();
});
//
// If no native HLS support, check if hls.js is supported
//
} else if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
}
</script>videoタグを書いたところにプレイヤーが表示されます。
サンプルとしてつくったものを置いておきます。ちなみに動画はhls.jsのドキュメントで使われているサンプル動画です。
0 件のコメント:
コメントを投稿