概要
Audio / Videoの自動再生が含まれるコンテンツを作成したときに詰まったことをメモとしてまとめてみる。
Firefoxでロード感知ができない？
動画が20MBくらいあったため canplaythrough でロードを感知し再生しようと思い、実装を進めていた。
ローカルでは特に問題なく動作していたため、サーバーへアップ。
アップ後に確認してみるとFirefoxで動画が再生できず途中で止まってしまう自体に…。
特にエラーも出ていない、ローカルで再度確認しても動いている…なぜだ…？
しばらくしてイベント周りが怪しいと感じ、すべてのイベントの動作を確認。
結果、Firefoxのみ、ローカルではcanplaythroughが発生しているが、サーバーでは発生していないことが判明。
ということで、canplay canplaythrough の両方で進めることで解決した。
ユーザーアクションがあるのに自動再生できない？
ユーザーアクションがないと自動再生ができない、困ったブラウザさんがいる。
（ミュートならユーザーアクションなしで自動再生できるはず）
「このボタンを押下後、○秒後にこのmp3を再生する」という感じで実装を進めるが、特定の処理のみ、とあるブラウザで自動再生エラー。
「ユーザーアクションがないぞ！このやろー！」って怒られる。いや、ボタン押してるじゃん…。
その後、処理順を変えたり検証してみると、あぁ…なるほどね…という原因が判明。
まず、ユーザーアクション後にAudio / Videoと関係ない非同期処理を挟むと、ユーザーアクションとみなされない模様。
そして、ユーザーアクション後、ある程度時間が経ってしまうとユーザーアクションとみなされない模様。
APIを挟んでからAudio / Videoを生成・再生するような場合は、色々と気をつけなければならない。
ふと、以前投稿した「Window.openによる遷移で詰まったこと」と状況が似ていると感じた。
ユーザーアクションに依存するものは、このパターンに当てはまりそうな気がする。
その他
video要素に preload = 'auto' を入れておくこと。うっかり忘れるとびっくりするくらい途中で止まる。
所感
ブラウザって大変。
参考URL
https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/canplaythrough_event