この記事は2015年に書いたものです。サイトの移行で消えてしまいましたので復活させてみました。
現在ではもっと良いか書き方があると思います。
依頼：mp4ファイルを連続再生してほしい
24時間、黙々と動画をバックアップしているシステムがある。
動画の内容チェック用に、その動画から任意の開始時刻～終了時刻の範囲をを切り出し、MP4に保存してくれる切り出しシステムも付いている。
範囲は複数箇所指定できるので、保存されるMP４ファイルも複数だ。
依頼は、その切り出しシステムが保存したmp4ファイル全てを、ブラウザのHTML5のVIDEOで連続再生したいというものだ。
こりゃ楽勝とおもったら、ちょっぴりつまづいた、動画をシームレスに連続再生してくれという点にだ。
条件まとめ
- 動画の個数は何個になるかわからない
- ファイル名は取得可能
- HTML5のvideoで再生すること
- jQueryを使ってもよい
- あとでカスタムしたいからややこしく作らないで
jQueryでsrc切り替えはカクカクして失敗
最初に試した
カクカクの理由はpreloadしていないから
動画srcの切替時にカクカクする原因は、srcを切り替えの場合、preloadが効いていないのではないかと推測。
preload対策のため、あらかじめ全部の動画分、
で、うまく動いたのはこれです
HTML側はこれ
<div id="videoContainer"></div>自己評価：よいと感じる点
配列を使って、キュー的に処理してる所で、array.forEach() 使ってforを使わずにすんだ。
自己評価：ダサいと感じる点
1個目を表示するのに、functionの外でこの寒さ。
$(tgtDiv + ' video:eq(0)').show();関数をキューに入れる作りのほうが、正解だと思ったけど作れなかった。
感想
を全部出力しといてhide()するのはダサイと思い、他の方法を試してみたが、カクカク感の除去にはあれこれするより、シンプルに再生させ、show() hide() したほうがいいこともあるんだなと。
要望に機能することが大切で、ダサイという概念で最初に引っかかってしまったこと反省した。