contentAWS+hls.jsでストリーミング再生(その2)hls.jshls.jsを使ってストリーミング再生を試みます。mp4からHLSに変換するところは前回の記事をご覧ください。この記事ではHLS形式の動画をブラウザからhls.jsを使って再生する部分を書きます。S3のバケット上にhls形式の動画がある。・ブラウザはChromeを使用。・ビデオを再生するフロント部分はfirebaseでデプロイ。</body></html>こんな感じです。これをfirebaseにあげました。src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>今回はcdnでhls.jsを読み込みました。video</button>videoタグで動画を再生する場所を確保し、ボタンが押されたら動画を再生するようにしました。});ボタンが押された時にvideo.play()で再生しています。play_timeの時間でタイムアウトを設定しているのは、ちょっと事情があって、動画の再生が終了したことを知りたかったからです・・・はまったところChromeブラウザでautoplayができない・・・?はじめ、動画は再生されるのに音声が全く再生されず、なんでや・・・?と悩みました。確かに、video.mutedをtrueにして、videoタグにautoplayを指定していると、音声なしで再生されます。FirefoxやIEではこのような問題は起こっていないようなので、Chromeブラウザを使う場合は注意が必要です。今回はページを読み込んだタイミングでビデオを再生するのではなく、任意のタイミング(ボタンを押した時)に再生したかったので、ボタンを押したタイミングで再生されるようにしました。CORSで引っかかる・・・?(もはやHLSの話ではないので手短に・・・)S3とfirebaseの両方でCORSの設定が必要でした。}],これを追記します。headerにCORSの設定を追加します。感想hls.jsは本当に分かりやすくて使い勝手がいいと思いました。最近Android始めました。upLoginユーザーは見つかりませんでした。