件HTML5のVideoプレイヤーとFlashのビデオプレイヤーを併用し、いろいろな環境に合わせて動画再生を行える非常に便利なスクリプト「Video-js」。Video.js私も多々利用させて頂いて居るのですが、ここにきてタイトル通りのバグ「ループ再生の2回目以降で、再生ボタンが表示されっぱなしになる」に遭遇し、解決したのでその方法を記載します。バグが発生する環境は下記の通り。Video-jsのFlashプレイヤーで再生をしているautoplayオプションをONloopオプションをONcontrolsオプションをONHTML5のプレイヤーでも発生するかは未検証です。原因Video.jsでは動画の再生・停止などに合わせイベントを発行しており、内部の動作についてもそのイベントに依存して制御を行っているようです。今回の問題はループ再生の場合にのみ発生するのですが、その発生機序としては下記のようなものでした。1回目の動画再生が開始:playイベントが発生playコールバックの処理(1):「再生ボタン」が「display:none」になる1回目の動画再生が終了:endedイベントが発生endedコールバックの処理(1):「ループ再生なら、再度最初から再生」という処理が実行される2回目の動画再生が開始:playイベントが発生playコールバックの処理(1):「再生ボタン」が「display:none」になるendedイベントに登録された2つめ以降のコールバックが発生endedコールバックの処理(2):「再生ボタン」を再表示させる要はコールバックの登録の順番が悪いというもので、endedイベントの最初のコールバックで再生処理を行ってしまっているものだから、endedイベントに登録された2個目以降のコールバックが、なぜかplayイベントの次に実行されるという訳のわからない状態に。いうわけで、このあたりのコードをさくっと修正すればバグも解消します。},下記のように改善します。},要は「ループ指定がされていない場合のみ、再生終了時にボタンを再表示してねん」という処理に変更をかけます。これで晴れて2回目以降の再生でも、再生ボタンがしっかり消えたままになります。あるため、動画によってビットレートは異なる)。公開はされませんURLコメント一部のHTMLタグが利用可能です。TECHは、WebデザインやWebシステム開発、Webのトレンドやニュースなど、Webに関する技術情報を中心に、WebデザイナーやWebプログラマーの方々に役立つ情報を発信しているブログです。@jyokyokuFacebookgithub家富正幸への直通メール株式会社インスパイアデザイン取締役の37歳、プログラミングとデザインを行う元計測制御系システムエンジニア。20歳でクリエイター系の専門学校を卒業後、なぜか全く知識の無い計測制御系の会社に就職し、LabVIEW言語を利用した計測制御系のシステム開発に3年ほど携わる。Webデザイナーへの道をあきらめきれずに転職。Webデザインをメインとして、客先でのディレクションやWebアプリケーションのプログラミングにも関わる。その後、現社長の浅賀理生と共に株式会社インスパイアデザインを立ち上げ、現在に至る。