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 h
2
終わりに
HTTP/2の設定だと動かない理由が調べきれなかったのが心残りですが、今回はサーバ側の問題と判断し、動かすこともできたので対応完了!
HTMLのみの静的なページ作るのに、公開サーバの設定の見直しまで必要になり迷走したというお話でした。
最後まで読んでいただきありがとうございました。