关闭

h5页面自动播放视频、音频_关于媒体文件自动全屏播放的实现方式

时间: 2018-01-19阅读: 4782标签: 视频

在移动端(ios和android)播放视频的时候,我们即使定义了autoplay属性,仍然不能自动播放。这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自己对浏览器进行设置才能支持autoplay。但是在我们可以通过相关事件来实现:


经发现微信通过"WeixinjsBridgeReady"和"DOMContentLoaded"这2个事件结合可以实现自动播放,那如果不是微信呢?我们可以可以加个触摸事件去实现。下面就给出代码简单的实现下


video.js代码:

;(function(w){
	var play={
		autoPlay:function(id,istouch){//媒体id,istouch是否开启触摸播放[自动播放视频]
			var media=document.getElementById(id);
			function toplay(){//播放
			    if(media.paused) media.play();
			}
			if(istouch) document.addEventListener('touchstart',toplay);
			function wxhandle(){//微信播放
			    toplay();
			    document.addEventListener("WeixinJSBridgeReady", function(){toplay();}, false);
			    document.removeEventListener('DOMContentLoaded', wxhandle);
			}
			document.addEventListener('DOMContentLoaded',wxhandle);
		},
		pausedclick:function(id,vid,fn){//[按钮id,媒体id,回调].点击事件-停止播放,操作
			var _self=this;
			document.getElementById(id).addEventListener('click',function(){
				document.getElementById(vid).pause();
				fn();
			});
		},
	};
	w.play=play;
})(window);


页面调用:

<video id="myvideo"  src="***.mp4" width="100%" height="100%" preload x5-video-player-type="h5"  x5-video-player-fullscreen="true" x-webkit-airplay="true" webkit-playsinline playsinline="true">
	<source src="***.mp4"></source>
</video>
<button id="stop">停止</button>

<script src="video.js"></script>
<script>
play.autoPlay('myvideo',true);//播放
play.pasuedclick('stop','myvideo',function(){//点击按钮停止         //....其他代码
});
</script>

备注:video中的属性是用于全屏播放的实现,如果在android的微信里面,上面的代码出现上下有黑边,导致不能全屏的情况,解决办法如下:

给video加上object-fit: fill;的style属性。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/376

关闭

视频全屏弹幕实现

这个问题如果思路错了就是个死胡同。所以我在找问题的时候趟了很多坑。思路错在我不应该使用视频的全屏,敲黑板!划重点啦!不要使用视频的全屏!(解决了问题的时候才幡然醒悟)

价值2580元廖雪峰前端视频,终终终于免费啦!

vue是国内最常用的前端框架,作者是尤雨溪大佬中文资料多,而且上手快,生态繁荣,是新手入门的首选框架。即将更新到3.0版本,追赶技术浪潮 进大厂就靠它啦

video.js切换视频源问题

什么要再重新load一下什么替换一下src,没有啥作用,简单粗暴又有效的方法,video的问题,单单替换source的src是不行的,简单明了重新替换整个video标签,将video用js重新替换一遍,更改src

jsmpeg.js_h5移动端视频自动播放

在移动端使用h5自动的video标签播放视频,设置autoplay属性,在android端部分不支持,全屏播放还存在层级问题,ios10以上版本支持视频自动播放,以下版本不支视频自动播放

优化 MP4 视频以便更快的网络串流

随着 Flash 的落寞 以及 移动设备的爆发性增长 ,越来越多的内容以 HTML5 视频的方式传递。在上一篇文章中你甚至能看到 使用 HTML5 视频替换 GIF 动图来优化网站访问速度 这样的技巧

h5视频播放踩坑记录

随着抖音、快手这类的视频类app的火爆,移动端h5视频类应用也随之兴起,使用video播放的场景也越来越多,本篇文章主要例举了移动端视频播放的一些场景和个人在开发过程中遇到的一些问题

js获取上传音视频的时长

获取上传视频路径,将该路径放入video标签,获取视频时长。方式一:隐藏一个音频标签,播放获取。方式二;通过new Audio的方式获取。上传之前限制一下视频的时长

html网页添加音乐视频方式

声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 Chrome 66 也正式关掉了声音自动播放

Bideo.js实现全屏视频背景

想在你的网页首页中全屏播放一段视频吗?而这段视频是作为网页的背景,不影响网页内容的正常浏览。那么我告诉你有一款Javascript库正合你意,它就是Bideo.js。

web视频播放

毫无疑问,现在是短视频、直播的时代。视频内容逐渐代替图文形式成为网友们获取新鲜事物以及展现自我的一大媒介。随着5G的到来,2020年属于直播短视频爆发式增长的一年,电商平台也都涌入直播营销的大风口

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!