もしかしたらその手の方々には常識かもしれないけど、覚書的な意味で。
あらすじ
- サイトにループ動画素材使いたい
- Firefoxで見たらちゃんとループしてる
- Chromeでみたら一回で止まってる
- jsで無理やりループさせようとした
結論としては
動画置いてたレンタルサーバーのせいだった
jsで無理やり #とは
html5のvideo要素をjsで制御する際、現在の再生秒数であるところのcurrentTimeというプロパティを使います。
currentTimeに0を入れれば再生時間が0秒目になって事実上のループ……再生終了イベントであるendedも見ればなおよし……のはずが。
ChromeでcurrentTimeが無視される
そんなバカな。
currentTimeプロパティ自体はどこの皆さんも使っているもので、Chromeであれば尚更使えないなんていう話はない。しかもFirefoxやIEでは使えるのに。
けれどいくらcurrentTimeに秒数を代入しようが戻ってくれない動画を見て途方に暮れていました。
videoの読み込み方式の違い
StackOverFlowにあったこの投稿によると、リソースにレンジリクエストを送って206 partial contentじゃなくて200 okが帰ってきたらサーバーのせいだから、とあります。
試しに自分の用意した動画にレンジリクエストを送ったら200が帰ってきました。これか！
で、何故partial contentが使えないとcurrentTimeが使えないのか。
Chromeの場合、videoタグによる動画は読み込んでいないところのシークバーをクリックしてもその地点から再生をしようとしてくれます。逆に例えばFirefoxだと、ロードが終わっていない地点からの再生はできません。
これはChromeのvideoタグがレンジリクエストを送って、任意の部分の動画リソースを都度もらって再生しているという仕様によるものです。そうではない方式（順次読み込みのみ）とどっちが正しいのかはちょっと調べられてませんが……。
試しに
<video controls autoplay preload="auto">
<source src="レンジリクエストを受け付けない動画URL">
<source src="レンジリクエストを受け付ける動画URL">
</video>
とすると、Firefoxでは上の動画が再生され、Chromeでは下の動画が再生されます。
currentTime(0)を実行すると実際にpartial contentが帰ってきているので、つまりpartial contentを受け付けているかどうかという問題に帰着しました。
partial content不可
partial contentそのものを許すかどうか、諸々のサーバーソフトで設定できるらしいです。
……ですが、不可に設定されているからといって許可に変えられるのは自分の管理下に置かれているサーバーだけだ！！！
対処法
自分でいじれるサーバーを用意するか、partial contentを許してくれるサーバーに動画を置きましょう。
（ちなみに借りてたのはｱｲｴｴｴ的なところです……これを機にVPSでも借りようと思いました）