依頼:mp4ファイルを連続再生してほしい

24時間、黙々と動画をバックアップしているシステムがある。

動画の内容チェック用に、その動画から任意の開始時刻~終了時刻の範囲をを切り出し、MP4に保存してくれる切り出しシステムも付いている。

範囲は複数箇所指定できるので、保存されるMP4ファイルも複数だ。

依頼は、その切り出しシステムが保存したmp4ファイル全てを、ブラウザのHTML5のVIDEOで連続再生したいというものだ。

こりゃ楽勝とおもったら、ちょっぴりつまづいた、動画をシームレスに連続再生してくれという点にだ。

 

条件まとめ

  • 動画の個数は何個になるかわからない
  • ファイル名は取得可能
  • HTML5の<video>で再生すること
  • jQueryを使っても良い。
  • あとでカスタムしたいから、ややこしく作らないで

jQueryでsrc切り替えはカクカクして失敗

最初に試した<video>を1個用意して、srcをjQueryで切り替える方法は失敗だった。
<video onended="myfunc">  という風に、onendedのイベント時に、srcを切り替えると切替時のカクカク感がとても大きくNGが出た。

カクカクの理由はpreloadしていないから

動画srcの切替時にカクカクする原因は、srcを切り替えの場合、preloadが効いていないのではないかと推測。

preload対策のため、あらかじめ全部の動画分、<video>を生成する方式に変更。

で、うまく動いたのはこれです。

Javascript

 

 

	$(document).ready(function() {
		  
		  //設定部分 再生データの配列
			var mp4Array = [
			 "http://techslides.com/demos/sample-videos/small.mp4", 
			 "http://techslides.com/demos/sample-videos/small.mp4"
			];
			//設定 ラップするコンテナdivのid指定
			var tgtDiv = '#VideoContainer';

      //メイン処理
			mp4Array.forEach(makeVideoTag);

      //メインが呼び出す関数
			function makeVideoTag( val, index) {
				$('<video>')
				  .attr({
				  	id :'video' + index,
				  	src:val,
				  	controls:true
				  	})
  				.appendTo($(tgtDiv))
  				.hide();
  				
  			  if(index !== mp4Array.length-1 )	{
  				$(tgtDiv + ' #video' + index).on('ended', function(event) {
						$(this).hide();
						$(this).next()   .show();	
					    $(this).next()[0].play();				 
				  });
  			  }
			}
				
			//HTML処理 生成したHTML<video>1個目を表示化
			$(tgtDiv + ' video:eq(0)').show();
			
		});


 

 

HTML側はこれ

<div id="VideoContainer">  
</div>

自己評価:よいと感じる点

  • 配列を使って、キュー的に処理してる所で、array.forEach() 使ってforを使わずにすんだ。
  • <video>をappendToしてるところ。
  • .attr()のところ

自己評価:ダサいと感じる点

1個目を表示するのに、functionの外でこの寒さ。

$(tgtDiv + ' video:eq(0)').show();

関数をキューに入れる作りのほうが、正解だと思ったけど作れなかった。

感想

<VIDDEO>を全部出力しといてhide()するのはダサイと思い、他の方法を試してみたが、カクカク感除去には<VIDEO>列挙法には及ばなかった。

あれこれするより、シンプルに再生させてshow() hide() したほうがいいこともあるんだなと。

要望に機能することが大切で、ダサイという概念で最初に引っかかってしまったこと深く反省。

DEMOはこちら

DEMOは同じ動画ファイルを2個連続で再生しています。

DEMO再生ページはこちらから