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

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

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

相关文章

js输入法

用js开发一款输入法是什么体验,来瞧瞧吧开发古诗词教学的软件,为了防止学生作弊,正常手机输入法有联想功能,于是这里需要开发一个没有联想的输入法。其实非常简单,主要是字典,这里从网上找的字典,需要的朋友...

E语言吓退编程老司机

E语言吓退编程老司机

有门开发语言叫E语言,中文的编程语言。很多开发者瞧不上,但是少部分初中毕业的却用来开发外挂,而且赚了不少钱。很多人觉得e语言不稳定,玩游戏的都知道,其实稳定性特别强,只是开发没有生态,然后...

再谈面向过程编程,工序再到时序

再谈面向过程编程,工序再到时序

先看一个需求,这个是教学软件的一个环节。进入机场哪些东西能带哪些东西不能带?哪些东西放在行李箱托运?哪些放在包里随身携带?教学软件一般是带有互动的,有时序的概念。1、时序开始,先是导学说话。2、用户开...

vscode打造自己的颜色主题

vscode打造自己的颜色主题

vscode的颜色主题大家有喜欢的吗? 默认主题反正我一个都不喜欢,我用了至少5年的dreamviwer,产生了习惯,因此编辑器喜欢浅色的。于是有了自己打造主题的想法,这里直接投机取巧,野生出奇迹。方...

GPS经纬度坐标系转换【js版】

万能的javascript版也来了,前端、后端nodejs都能用。<html> <body> <script>  /**   ...

python操作mysql

根据php思路写的,最近有空的时候学一点python。# -*- coding: UTF-8 -*- import pymysql cla...