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

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

在移动端(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属性。


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

WebRTC:一个视频聊天的简单例子

在前面的章节中,已经对WebRTC相关的重要知识点进行了介绍,包括涉及的网络协议、会话描述协议、如何进行网络穿透等,剩下的就是WebRTC的API了。WebRTC通信相关的API非常多,主要完成了如下功能:

vue实现自定义H5视频播放器

前段时间基于vue写了一个自定义的video播放器组件,踩了一些小坑, 这里做一下复盘分享出来,避免日后重复踩坑,这里就直接放几张完成后的播放状态图吧,界面布局基本就是flex+vw适配一把梭

Web视频格式

网络视频一直都很火。虽然在页面上嵌入 Instagram 和 Youtube 视频非常简单,但是有越来越多的需求 —— 比如许多电子商务的场景 —— 要求定制的视频传输方法。

视频全屏弹幕实现

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

HTML5的video和audio

HTML5引入的<audio>和<video>元素,使用起来和<img>元素一样简单。对于支持HTML5的浏览器,不再需要使用插件(像flash)来在HTML文档中嵌入音频和视频:实际上,使用这些元素的时候要更加巧妙。由于各家浏览器制造商未能在对标准音频和视频编码支持上达成一致

如何实现沉浸式视频体验?

沉浸式视频体验,大致内容是一个页面里有几十个视频,用户点击其中一个视频时,该视频自动滑动到屏幕可视区域的顶部开始播放,并暂停其他视频,该视频滑出屏幕可视区域之后要自动暂停。

使用 multipart/x-mixed-replace 实现 http 实时视频流

关于实时视频传输,业界已经有非常多成熟方案,分别应用在不同需求场景。本文介绍一种基于 HTTP ,非常简单、易理解的方案,实用性不强,但有助于理解 HTTP 协议。

h5视频播放踩坑记录

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

移动端视频h5表现问题汇总

同屏播放视频、移动端视频预加载:由于移动端不能预加载视频,所以hack一种方案:监听WXJSBridge WeixinJSBridgeReady、微信安卓环境下需要在touchmove事件中阻止掉默认事件,否则不能触发视频播放 、 由于微信安卓版本基于x5内核,视频会出现全屏按钮,而且去不掉,会误导用户点击

Web端直接播放 .ts 视频

最近项目中需要前端播放 .ts 格式视频,捣鼓了几天学习到很多知识,也发掘了一种优秀的解决方案,项目中已存储的 .ts 切片数量众多,已经占用了NAS服务器绝大部分的资源,生成的 .m3u8 索引虽然非常小

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全