html5视频播放自动全屏

var videoF = (function() {var tmpV = {};var video_playing;/*** @description 切换内容列时暂停当前播放的视频*/function pausedVBeforeChangeLi() {if (video_playing && !video_playing.ended && !video_playing.paused) {video_playing.pause();}};tmpV.pausedVBeforeChangeLi= pausedVBeforeChangeLi;/*** @description 播放全屏 很诡异，这个方法居然不可用* @param {Object} element*/function launchFullScreen(element) {if (element.requestFullScreen) {element.requestFullScreen();} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if (element.webkitRequestFullScreen) {element.webkitRequestFullScreen();}};/*** @description 取消全屏 这个方法也是不可用* @param {Object} elem*/function cancelFullScrren(elem) {elem = elem || document;if (elem.cancelFullScrren) {elem.cancelFullScrren();} else if (elem.mozCancelFullScreen) {elem.mozCancelFullScreen();} else if (elem.webkitCancelFullScreen) {console.log("webkitCancelFullScreen");elem.webkitCancelFullScreen();}};/*** @return 返回支持的全屏函数 从网上找到了这段代码，具体网址忘记了，返回支持的全屏方法，在Safari上可用* @param {Object} elem*/function fullscreen(elem) {var prefix = 'webkit';if (elem[prefix + 'EnterFullScreen']) {return prefix + 'EnterFullScreen';} else if (elem[prefix + 'RequestFullScreen']) {return prefix + 'RequestFullScreen';};return false;};/*** @description video相关事件的绑定* @param {Object} v*/function videoEvent(v) {var video = v,doc = document;video.addEventListener('play', function() {//每次只能播放一个视频对象if (video_playing && video_playing !== this) {console.log('multi')pausedVBeforeChangeLi();}video_playing = this;console.log('play');var fullscreenvideo = fullscreen(video);video[fullscreenvideo]();});video.addEventListener('click', function() {//点击时如果在播放，自动全屏；否则全屏并播放console.log('click')if (this.paused) {console.log('paused');this.play();} else {var fullscreenvideo = fullscreen(video);video[fullscreenvideo]();}})video.addEventListener('pause', function(e) {this.webkitExitFullScreen();});video.addEventListener("webkitfullscreenchange", function(e) {//TODO 未侦听到该事件console.log(3);if (!doc.webkitIsFullScreen) { //退出全屏暂停视频video.pause();};}, false);video.addEventListener("fullscreenchange ", function(e) {console.log(31);if (!doc.webkitIsFullScreen) { //退出全屏暂停视频video.pause();};}, false);video.addEventListener('ended', function() {//播放完毕，退出全屏console.log(4)this.webkitExitFullScreen();}, false);};tmpV.videoEvent = videoEvent;return tmpV;}());

来自转载有补充

补充具体调用，定义具体video标签后调用即可

 (function(){video = document.getElementById("video");videoF.videoEvent(video) initialize();})();

https://www.cnblogs.com/phillyx/p/4719209.html

http://www.cnblogs.com/phillyx/

By小云菜:http://www.cnblogs.com/phillyx/

github:http://github.com/phillyx

html5视频播放自动全屏相关推荐

微信安卓 H5 video视频播放自动全屏
这里写自定义目录标题 1.(安卓手机)微信中禁止点击视频自动全屏 2.禁止显示进度条本文是为了自己防止忘记了在此记录,如果不足之处还望指出一起学习腾讯微信X5内核浏览器文档地址:https://x ...
uniapp，H5下，安卓手机视频播放自动全屏问题
禁止安卓手机播放自动全屏 1,需要给video标签添加禁止参数 t7-video-player-type="inline"webkit-playsinline="true ...
ios html5 自动全屏播放,禁止iPhone Safari video标签视频自动全屏的办法
最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签). 如: 在iPhone safari 点击视频会弹出播放器进行全屏播放. 在网上看 ...
html视频播放器全屏,HTML5 video播放器全屏(fullScreen)方法实例
首先来说,这个标题具有误导性,但这样设置改标题也是主要因为video使用的比较多在html5中,全屏方法可以适用于很多html 元素,不仅仅是video 复制代码代码如下: 全屏问题 *{ padd ...
html5播放器自动全屏,HTML5 video播放器全屏(fullScreen)方法实例
首先来说,这个标题具有误导性,但这样设置改标题也是主要因为video使用的比较多在html5中,全屏方法可以适用于很多html 元素,不仅仅是video复制代码代码如下: 全屏问题 *{ paddi ...
html5播放器自动全屏,HTML5 video播放器全屏(fullScreen)实现的方法
这篇文章主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下首先来说,这个标题具有误导性,但这样设置改标题也是主要因为vid ...
微信内置浏览器video标签自动全屏播放以及层级过高问题
转载自:微信内置浏览器video标签自动全屏播放以及层级过高问题 - 程序员大本营今天事用html5的<video>标签做微信内置浏览器视频播放页面时,需要在视频层级上显示类似弹幕的对话 ...
[html] 如何解决微信浏览器视频点击自动全屏的问题？
[html] 如何解决微信浏览器视频点击自动全屏的问题? 1.1 页面内播放 X5内核视频在用户点击后默认会进入全屏播放,前端可以设置video的x5-playsinline属性来将视频限定于网页内部 ...
关于video标签，禁止点击播放时自动全屏，和video出现诡异窗口重叠
禁止点击video时自动全屏问题:加上x5-playsinline属性或者x5-video-player-type="h5",都可以禁用全屏,其中x5-video-player-t ...

html5视频播放自动全屏

By小云菜:http://www.cnblogs.com/phillyx/

github:http://github.com/phillyx

html5视频播放自动全屏相关推荐

最新文章

热门文章