ChromeでHTML5 videoタグのシークバーが効かない

HTMLのvideoタグを使った時にハマったので、備忘録として残します。
※一応解決はしましたが、解決した理由が調べきれなかった内容となります。

問題

ChromeでHTMLのvideoタグでサーバに配置したmp4の動画を埋め込み表示したところ、「再生はできるけどシークバーで移動しても反応しない」という現象が発生!
※先に移動できない、戻る場合は最初へのみ移動できる

写真素材:フリー写真素材ぱくたそ

調査・試行

そんなことある~?と調べてみたらあるんですね・・・
<参考>WordPressで公開した動画のシークができない

なるほどなるほど・・・range requestの対応・・・
参考にしてレスポンスを漁ってみるものの、206のレスポンスで応答してくれている・・・ナンデ?

Google先生に聞いてもhttpsで問題が発生しているような情報は見つからない。
Chromeの問題って話もあるものの、他のhttpsの動画が乗ってるサイトを見ても動いている。
ナンデ・・・?

思い付きでうまく動かない環境をhttpとhttpsで見比べてみると・・・
httpを見たらシークバーで移動できる!httpsで見たらできない!
ナンデ・・・・・・?

とりあえずapacheの設定ファイルなど環境設定など見返して、httpとhttpsの差がないか確認を行ったところ差を発見!
Protocols h2 http/1.1
httpsには上記があって、httpには指定がない。
「いやだけどこれは関係ないよな・・・」と思いつつ消してみたら、動きました!

ちなみに設定を戻し、下記の設定にすると動く
Protocols http/1.1
下記の設定だと動かない
Protocols h2

終わりに

HTTP/2の設定だと動かない理由が調べきれなかったのが心残りですが、今回はサーバ側の問題と判断し、動かすこともできたので対応完了!
HTMLのみの静的なページ作るのに、公開サーバの設定の見直しまで必要になり迷走したというお話でした。

最後まで読んでいただきありがとうございました。

関連記事

TOP
TOP