【vue/javascript】 ライブ動画再生がうまくいかなかったので、hls.jsで解決した話（IE11再生も）

はじめに

ライブ動画再生がうまくいかなかったので、hls.jsで解決した話（IE11再生も）。

ライブ映像だとなぜかvideojsでうまく再生されない。しかも安定性にも欠ける部分があるらしい。

・https://www.techlive.tokyo/archives/4295
・https://ch.nicovideo.jp/skas-web/blomaga/ar1798847

ということでvideojsではなく、hls.jsを使用することにした結果、うまくいったのでメモ。

ちなみに、IE11再生もうまく行きます。
IE11再生させたい時には、開発者ツールを開いてネットワークタブにある「常にサーバから更新する」をオンにしてみてください。

・https://www.gitmemory.com/issue/video-dev/hls.js/2421/547774657

結論

videojs同様に、ドシンプル。

<template>
    <video id="video_id" controls webkit-playsinline autoplay></video>
</template>

<script>
import hlsjs from 'package.jsonのhlsjsで定義されていた名前' // hlsjsをnpmでインストール
export default ({
    data() {
        return {
            // hlsjsを機能させるための初期化処理を格納した変数
            hls: new Hls()
        }
    },
    methods: {
        // 動画再生時にこの関数を叩く
        playVideo: function(video_url){
            this.$nextTick(function () {
                var video = $('#video_id').get(0);
                if(Hls.isSupported()) {
                    var hls = this.hls;
                    hls.loadSource(video_url);
                    hls.attachMedia(video);
                    hls.on(Hls.Events.MANIFEST_PARSED,function() {
                        // 動画再生
                        video.play();
                    });
                } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                    video.src = video_url;
                    video.addEventListener('loadedmetadata',function() {
                        // 動画再生
                        video.play();
                    });
                }
            })
        },
        // 動画停止時にこの関数を叩く
        stopVideo: function(){
            // 動画停止
            this.hls.destroy();
        }
    }
})
</script>

ちなみに

videojsだと以下のように実装。

<template>
    <video id="video_id" controls webkit-playsinline autoplay></video>
</template>

<script>
import videojs from 'package.jsonのhlsjsで定義されていた名前' // videojsをnpmでインストール
export default ({
    methods: {
        // 動画再生時にこの関数を叩く
        playVideo: function(video_url){
            var player = videojs("video_id", 
              {
                flash: {
                  hls: {
                    withCredentials: false
                  }
                },
                html5: {
                  hls: {
                    withCredentials: false
                  }
                }
              }
            );
            player.src({
              src: video_url,
              type: 'application/x-mpegURL'
            });
            player.play();
        },
        // 動画停止時にこの関数を叩く
        stopVideo: function(){
            // 動画停止
            videojs('video_id').dispose();
        }
    }
})
</script>