やりたいこと 認証がかかったストレージのAPIからJavaScriptで動画データを取得してvideoタグで再生したかった. FetchAPIやXHRでMP4ファイルにアクセスはできるので,これをブラウザ上で再生したいだけだけなのだけど... 普通にvideoタグのsrcにAPIのURLを突っ込む → リクエストヘッダ等をセットできなくて認証できない FetchAPIでデータを読んでblobを再生する → ファイル全体を読まないと再生開始できない(動画は数百MBある) (参考記事) MPEG-DASH等のFragmented MP4を読み込んでMSEで再生する → 事前にサーバ側に置くデータを変換しないと再生できない (参考記事) 意外とめんどう. JavaScriptでFragmented MP4を作る +------------+ +-----------+ +------------
![FetchAPIでReadableStreamからMP4を読みながらvideoタグで再生する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c97d19c0100b48b3eff41ef32563c802fe1dea4/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9RmV0Y2hBUEklRTMlODElQTdSZWFkYWJsZVN0cmVhbSVFMyU4MSU4QiVFMyU4MiU4OU1QNCVFMyU4MiU5MiVFOCVBQSVBRCVFMyU4MSVCRiVFMyU4MSVBQSVFMyU4MSU4QyVFMyU4MiU4OXZpZGVvJUUzJTgyJUJGJUUzJTgyJUIwJUUzJTgxJUE3JUU1JTg2JThEJUU3JTk0JTlGJUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz04OWUwZGRmZGVjYjE2ZTAxMGRjYWI4ODg0MTlkNWY1NA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBiaW56dW1lJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1jOGZhODc0NzE5ZDM0NmExNWEyZGRiNjZiNzk3MjI0Yg%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D96e1d8a7fafe6713e35aa5a388054923)