視頻播放jsmpeg.js

jsmpeg.js

 

<canvas style="width: 100%" id="video-canvas"></canvas>


<script src="js/lib/jsmpeg.min.js"></script>



app.videoPlay = new JSMpeg.Player(app.params.ts, {
			canvas: document.getElementById('video-canvas'),
			autoplay:false,//是否自動播放
			loop:false,
			poster:'img/sharehint.png',
			onPlay: function() {
				//開始播放事件回調
				console.log('play')
			},
			onEnded: function() {
				//播放完成事件回調
	       console.log('end')
	   },
	   onPause:function(){
	   		//暫停時的回調
	   		console.log('pause')
	   },
	   onVideoDecode:function(){
	   	//–在每個解碼和渲染的視頻幀之後調用的回調
//	   	console.log(app.videoPlay.currentTime);
	   }
		});
		// try to unlock immediately
		app.videoPlay.audioOut.unlock(onUnlocked)
		
		//下方爲了移動端出聲音
		function onUnlocked () {
			app.videoPlay.volume = 1;
			//移除掉點擊事件
//			document.removeEventListener('touchstart', onTouchStart)
		}
		function onTouchStart () {
			app.videoPlay.audioOut.unlock(onUnlocked);
			//播放與暫停
			if(app.videoPlay.paused ){
				app.videoPlay.play();
			}else{
				app.videoPlay.pause();
			}
//			document.removeEventListener('touchstart', onTouchStart)
		}
		// try to unlock by touchstart event
		document.addEventListener('touchstart', onTouchStart, false)