以下のようなHTMLでmp4ファイルをページに埋め込むことを検討しております。
html
1<video src="〇〇.mp4" controls preload="auto" controlslist="nodownload" playsinline></video>
再生ボタンを押して再生した場合、再生後に特に何も操作しなければ問題なく再生されるのですが、シークバーを操作したり、15秒進む/戻るボタンを押したりすると、音声が流れないまま動画のみが再生される時間が数秒あったのち、音声がずれた状態で再生されます。
上記の現象はiphone、iPad(ブラウザはSafari,chromeで試し、両方とも上記の現象が起こります。)で発生します。
埋め込もうとしている動画の大きさは約60MB、長さは約2分あります。
現状、本現象の原因は動画の容量が大きすぎることが原因なのではないかと考えております。
動画の容量の大きさが原因の場合、動画のサイズ縮小以外の方法で本現象を解決する手段はありますでしょうか。
また、動画の容量以外に考えられる原因がございましたら、その原因と解決策をご教示いただけると幸いです。
何卒よろしくお願いいたします。
【2021.6.23追記】
原因を特定するために、以下のことを試しました。
・videoタグの実装方法が原因かと考え、問題が発生している動画をテストサーバーに置いて再生したのですが、
同様に遅延が発生します。
・ビットレートを下げて動画を書き出していたことが原因かと考え、高速ビットレートで再度書き出したのですが、
同様に遅延が発生します。
・試している中で気になった点として、ビットレートを下げたものは音声が先に聞こえてくるのに対して、
高速ビットレートのものは音声が遅れて聞こえてくる状態になっています。
以上の点から、動画自体に何か問題がありそうな感じはしているのですが、解決策がわからない状態です。
解決策として思い当たることがある方がいらっしゃいましたら、ご教示いただきたく存じます。
あなたの回答
tips
プレビュー