Laravelで動画ストリーミング。
忘れないための落書き。
作業手順
video.js をインストール
npm install --save video.js
package.json は以下のような感じになる（抜粋）
package.json
"dependencies": {
"video.js": "^7.12.3"
}
webpack.mix.js で node_modules 配下のファイルを public 配下にコピー
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/style.scss', 'public/css')
.copy('node_modules/video.js/dist/video.min.js', 'public/js') // videojs用
.copy('node_modules/video.js/dist/video-js.min.css', 'public/css'); // videojs用
画面にプレイヤーを表示
video.php
<html>
<head>
<link href="{{ asset('css/video-js.min.css') }}" rel="stylesheet">
<script src="/js/video.min.js"></script>
</head>
<body>
<video-js id=video with=600 height=300 class="vjs-default-skin" controls>
<source src="/path/to/video.m3u8" type="application/x-mpegURL">
</video-js>
<script>
var player = videojs('video')
</script>
</body>
</html>
動画の保存場所が S3 で CloudFront から読み込む場合
CORS問題を解決しないとローカル環境等の別ドメインで動画を再生できない。
S3のアクセス許可の Cross-Origin Resource Sharing (CORS) を定義する。
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"MaxAgeSeconds": 3000
}
]
CORS関連に必要なヘッダーが CloudFront を経由してS3に届くようにする。
CloudFront の Behavior の Origin Request Policy に Managed-CORS-S3Origin を追加する。