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

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

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

相关文章

扫描仪的驱动安装(一体机网络版)

扫描仪的驱动安装(一体机网络版)

上次介绍了常规硬件的驱动正确安装方法,今天来聊一下打印机一体机的扫描功能的安装。 如果是usb连接,直接驱动管理工具就可以安装上。如果网络连接,一般可以把打印驱动安装上,...

浅谈遗忘的html技术iframe

很多前端朋友已经对iframe完全不了解了,现在前端主流的框架基于vue、rect、angular,都不建议使用iframe,于是iframe这么美丽的技术方案被人遗忘了。这里给大家介绍一下,希望感兴...

h5的横屏适配

h5的横屏适配

最近遇到一个问题,我们开发的软件是横屏软件,因客户群体主要是学校,就是使用者是老师和学生。本来软件设计的是电脑机房里用,现在学校希望手机也可以用。结果手机用起来就是这个现象。老师提意见,说字太小看不清...

nodejs简单实现端口映射(隧道)

nodejs简单实现端口映射(隧道)

来个万能的javascript代码,实现端口映射。前端electron桌面软件也可以用到。【port.js】var net = require('net'...

如何判断一个经纬度是哪个省?

需求是这样的,有个卖gps防盗器的公司,需要分析出用户去年一年内经过了那些城市?假设有10万个用户,每个用户有100万个轨迹点。我们怎么分析呢?常规方法是一个点一个点的分析,那就是10w*100w=1...

按键精灵调用大漠插件后台挂机

大漠插件dmsoft,是一个dll调用的插件,很多语言支持调用,可以用来开发外挂脚本。它的主要优势是后台,就是把窗口拖到屏幕外也能挂机,是一款性能不错的插件。很多图色类外挂脚本都是基于改插件开发的。按...