html5-声音视频自动播放的坑

野生程序猿-杂烧5年前随意分享925

因为从事的是教学软件的开发,不知何年何月开始声音、视频不支持自动播放了。必须点一个按钮才能播放。教学类软件很多都是有动画的,像播放器一样,从头开始慢慢播放,可以理解为n帧,但是因为程序开发不是视频制作,没有序列帧,所以要通过回调实现这些功能。经常开发这类软件,得寻找自己的方案。


果断选择了jquery,没错就是古老的jquery。直接对dom进行监听。哪个元素不能自动播放,我就在哪个元素上插个必须点击才能播放。

部分代码片段

var this_v=$(`#video_${this_id}`);
					
this_v.attr("src",this_v.attr("xsrc"));

var this_v_dom=document.getElementById(`video_${this_id}`); 
var this_c_dom=document.getElementById(`canvas_video_${this_id}`); 

this_c_dom.width = 1920;
this_c_dom.height = 1080;
var this_ctx=this_c_dom.getContext('2d');

var captureFrame=function() {
	// console.error('captureFrame');
	// console.error(this_v_dom);
	// console.error(this_ctx);
	this_ctx.drawImage(this_v_dom, 0, 0, this_c_dom.width, this_c_dom.height);
	setTimeout(function(){
		captureFrame();
	},40);
}

try{
	this_v_dom.play();
}catch(e){}

var this_played=false;

this_v_dom.addEventListener("ended",function(){
		 console.error("播放结束");
		 go_next();
})
this_v_dom.addEventListener("play",function(){
		 this_played=true;
		 console.error('自动播放了');
		 captureFrame();
})

setTimeout(function(){
	console.error('this_played',this_played);
	if(this_played==false)
	{
		//this_v_dom.muted=true;
		
		var dianji_html=`<div id="dianjipingmu">点击屏幕继续</div>`;
		$("#dianjipingmu").remove();
		$(".app").eq(0).prepend(dianji_html);
		$("#dianjipingmu").click(function(){
			$("#dianjipingmu").remove();
			this_v.attr("src",this_v.attr("xsrc"));
			this_v_dom.play();
		});
	}
	
},588);

野生办法,延迟判断一下是否播放成功。并监听是否播放结束,然后go_next();

相关文章

按键精灵+大漠插件 打boss(脚本demo3)

前面介绍了大漠插件,这里再来个复杂点的,这个是 4个号多开刷任务Sub 初始巡检() //判断是否出于英雄之门界面 Delay 10000 MoveTo 40...

前端的多端适配-硬件接口篇

前端的多端适配-硬件接口篇

我们在多端开发的时候经常会遇到硬件接口的坑,比方调用扫一扫。h5网页要扫一扫,小程序要扫一扫,app也要扫一扫。我们 正常都是一边开发,一边h5端网页调试。但是h5端根本没有办法扫一扫啊?没有支付啊?...

nodejs同步操作sqlite3类

electron是基于nodejs的,为了方便electron存储,想到了sqlite这种轻便数据库。作为桌面应用,不像nodejs写服务端,为了简化开发,所以写了个同步的操作sqlite的类库,需要...

时序数据库推荐taos

  时序数据库(Time Series Database,TSDB) 全称为时间序列数据库。时间序列数据库指主要用于处理带时间标签(按照时间的顺序变化,即时间序列化)的数据,带时间标签的数据也称为时间...

阿里云获取TOKEN

阿里云获取TOKEN阿里云有sdk,但是看了一下,解压后有10多MB,于是参照官方文档写一个https://help.aliyun.com/document_detail/113251.html采坑指...

推荐一个前端框架Svelte(超级轻量级)

现在的前端框架太多了,国内用得比较多的是vue,非常强大,但是个人感觉灵活性糟糕,代码比较繁琐。近期接触一个框架,顿时让我感觉非常的爽,一种似曾相似的感觉,这个框架就是Svelte。Svelte是一个...