视频播放jsmpeg.js

最新推荐文章于 2026-06-03 11:02:48 发布

原创最新推荐文章于 2026-06-03 11:02:48 发布 · 6.7k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

功能

当前文章被收录于：

功能

25 篇文章 1 人学习

订阅专栏查看详情

html标签

当前文章被收录于：

html标签

1 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何利用jsmpeg.js这个JavaScript库在浏览器中实现流畅的视频播放，包括加载本地或远程视频源，设置播放控制及优化播放性能等关键步骤。

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)