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

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

因为从事的是教学软件的开发,不知何年何月开始声音、视频不支持自动播放了。必须点一个按钮才能播放。教学类软件很多都是有动画的,像播放器一样,从头开始慢慢播放,可以理解为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();

相关文章

电脑驱动的正确安装方式

电脑驱动的正确安装方式

虽然从事开发工作,但好歹是做技术的,先前就遇到做开发的同事驱动都无法正常安装,只能傻瓜式的setup,很多时候是装不上的。正常的傻瓜式安装, 安装的是最新版本驱动,你的驱动是旧的也提示“已经为您安装了...

IPMI模块介绍,远程开机走起来

IPMI模块介绍,远程开机走起来

作为野生程序猿,生活中经常使用开发技术。这里给大家介绍一个好东西 IPMI 。 很多开发人员居然没听说过这个东西,看来做技术还是太不上心了,工作之外的积累太少了。IPMI...

强迫症犯了_重命名

文件夹里的文件命名是这样的,1.mp4,2.mp4,...,999.mp4 看着不舒服,我喜欢 001.mp4,002.mp4,003.mp4。很多播放软件 1后面是11、12排序的。于是通过node...

编译新的js库用在传统模式直接使用

面向dom的jquery被淘汰了,但是jquery拥有多年的生态,很多时候还是可以用在一些项目上的。没有最好的开发语言,也没有最好的框架;只有最适用的开发语言、最适用的框架。很多时候我们敏捷开发者都会...

egret升级版本后遇到的问题

升级完egret引擎版本后vscode项目启动不了了,关键是新的demo也启动不了。只能用egret run -a 启动。egret越来越离谱了,还发现了其他怪异问题。1、html5编译报错,提示“您...

打造支付中心

随着公司业务的开展,发现多个环节需要用到支付。我们在购买聚合支付的时候,每年年费不同,享受到的服务也有很大的差距。当资金有限的时候,我们选择了较便宜的服务,这个时候我们能创建的支付应用数量较少,因此我...