vue.js hls.jsでブラウザ関係なしで動画を再生させる

vue.jsとhls.jsを組み合わせて動画を再生させる

hls.jsを使うことでブラウザの縛りなしで動画を再生することができます。
hls.js github
.hlsをブラウザ関係なく一発再生する “hls.js”

動画を再生させるコード

hlsをインストール
hls npm

npm i [e-mail].6087

ホスティングされてる動画を再生する場合

<template>
  <div>
    <div>
      <video id="video" controls muted autoplay playsinline loop></video>
      <button @click="this.videoPlay">video play</button>
    </div>
  </div>
</template>

<script>
import Hls from "hls.js";
export default {
  data: () => {
    return {
      hls: new Hls(),
    };
  },
  methods: {
    videoPlay() {
      const video = document.getElementById("video");
      const videoUrl =
        "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8";
      if (Hls.isSupported()) {
        this.hls = new Hls();
        this.hls.loadSource(videoUrl);
        this.hls.attachMedia(video);
        video.play();
      } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
        video.src = videoUrl;
        video.addEventListener("canplay", () => {
          video.play();
        });
      }
    },
  },
};
</script>

ローカルにあるm3u8を再生させたい時

<template>
  <div>
    <div>
      <video id="video" controls muted autoplay playsinline loop></video>
      <button @click="this.videoPlay">video play</button>
    </div>
  </div>
</template>

<script>
import Hls from "hls.js";
export default {
  data: () => {
    return {
      hls: new Hls(),
    };
  },
  methods: {
    videoPlay() {
      const video = document.getElementById("video");

      if (Hls.isSupported()) {
        this.hls = new Hls();
        this.hls.loadSource("./asset/video/sample.m3u8");
        this.hls.attachMedia(video);
        video.play();
      } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
        video.src = "./asset/video/sample.m3u8";
        video.addEventListener("canplay", () => {
          video.play();
        });
      }
    },
  },
};
</script>

else以降はIOS Safari用です。

ローカルでhlsを再生させたい場合の注意

httpsじゃないと動画再生しません。

どういうことか。
普通のローカル環境 localhost:8000 だとサイトURLが「http」なので動画が再生しません。

オプションでサーバーを立ち上げる時にhttpsで立ち上げるオプションが必要です。

npm run serve --https

もしくはgithubpagesなど簡単にサイトをホスティングしてくれるサービスを使う。

（静的なサイトのみホスティング可能）

githubpagesを使うに当たってすること
１、packege.jsonとかがある階層に vue.config.jsを自分で作る。
その中に色々オプションがあるからそれを使ってbuild後にできる本番用のファイルが　/doc 直下にできるようにする。

module.exports = {
 publicPath: './',
 outputDir: 'docs/',
}

２、本番環境用にコマンド実行

npm run build

/dist　っていうファイルが作られているはず

それからgihubにコードをアップ。
そのあとgithubpageを設定します。

こちらを参考にどうぞ。
https://qiita.com/y_fujieda/items/70fc75708b932e04a035

またまた注意、、、

m3u8と.tsはpublic中のassetのなかにvideoなどのファイルを作ってその中にいれる必要があります。

m3u8用のファイルを適当な階層におくとgithubpagesなどでホスティングしても動画が再生されません。

どういうことか。
本番環境用にbuildするとdist というファイルが作られます。
そこではpublicの中のindex.htmlが読み込まれるらしい。
なので、index.htmlから.m3u8 .ts 読むようにパスを書く必要があります。

ここ地味にはまりました。
video.play()をしているファイルからm3u8 tsがあるところまでのパスを書いてて永遠に再生されませんでした。

publicにあるindex.htmlからのm3u8ファイルを読むパスを書いてください！！

ローカルにあるhlsを再生する場合少し注意が必要です！！

ついでに自分でffmpegを使ってhlsの動画を作る　

mp４などからhls動画を作る方法がffmpegです。
ffmpeg公式

オプションがたくさんあって、音声なしにしたり、解像度を変更したりなどいろいろなことができます。

ffmpeg -i 変換前の動画名.mp4 -vcodec libx264 -s 720x1520 -strict experimental -acodec aac -b:a 16k -flags +loop-global_header -vbsf h264_mp4toannexb -f segment -segment_format mpegts -segment_time 5 -segment_list 変換後に付けたい動画名.m3u8 変換後に付けたい動画名_%04d.ts

これを変換したいmp4ファイルがある階層で実行します。
すると実行後に新しいm3u8とtsファイルができているはず。

これをクラウド上にアップロードするか、ローカルにおいときます。

参考：ffmpegで音だけを削除する方法

まとめ

m3u8やtsファイルはpublicのなかにおく。videoSourceのパスの書き方注意
hls動画は「https」からのアクセスじゃないと再生されない。