摘要:里面主要的是多段视频播放暂停。本文包含全屏适配播放并在视频上放置其他元素。苹果手机嵌入视频小窗播放。目前替换几种解决方案的实测。安卓会自动全屏播放。如下图解决方法监听屏幕全屏事件中手动设置的值为。
本文包含前两天,美团推出的杨洋H5火爆朋友圈。里面主要的是多段视频播放、暂停。
听起来很简单,但是由于腾讯白名单限制,在微信浏览器,qq浏览器,会自动将video标签中非腾讯域名的视频 ,自动全屏,结尾追加视频推荐。并且白名单申请入口已经关闭。
全屏适配播放 并在视频上放置其他元素。例如下载按钮。
苹果手机 嵌入视频小窗播放。
目前替换几种解决方案的实测。
上传至腾讯视频(实测已经不行)
gif(尺寸太大)
先上代码//html //js var video = document.querySelector("video"); videoMethod(video); function videoMethod(video) { video.addEventListener("touchstart", function () { video.play(); }); setTimeout(function () { video.play(); }, 1000); document.addEventListener("WeixinJSBridgeReady", function (){ video.play(); video.pause(); }, false); video.addEventListener("ended", function (e) { video.play(); }) //进入全屏 video.addEventListener("x5videoenterfullscreen", function(){ window.onresize = function(){ video.style.width = window.innerWidth + "px"; video.style.height = window.innerHeight + "px"; } }) //退出全屏 video.addEventListener("x5videoexitfullscreen", function(){ window.onresize = function(){ video.style.width = 原尺寸; video.style.height = 原尺寸; } }) } //引用js iphone-inline-video //css .IIV::-webkit-media-controls-play-button, .IIV::-webkit-media-controls-start-playback-button { opacity: 0; pointer-events: none; width: 5px; } .videobox { width: 4.78rem; height: 7.8rem; position: absolute; top: 3.2rem; left: 1.2rem; } video{ width: 4.2rem; height: 7.69rem; position: absolute; left: .22rem; top: .7rem; overflow: hidden; margin-top:-.7rem; }详细解读 属性
auto 页面加载后载入整个数据
meta 页面加载后载入元数据
none 不载入视频
小窗播放 使视频不脱离文本流,但是需要webview(allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES) ,结果就是苹果支持,安卓不支持。安卓会自动全屏播放。
字面意思 容许airplay (通过AirPlay可以把当前的视频投放到支持此技术的其他设备上。)
如果是 video 标签,可以通过 x-webkit-airplay="allow" 属性开启;
如果是 embed 标签,可以通过 airplay="allow" 属性开启。
建议看官网文档非常详细 。十分重要必看。
填充尺寸 详情
方法setTimeout(function () { video.play(); }, 1000); //微信webview全局内嵌,WeixinJSBridgeReady方法 document.addEventListener("WeixinJSBridgeReady", function (){ video.play(); video.pause(); }, false); //诱导用户触摸 video.addEventListener("touchstart", function () { video.play(); });
除ended,timeupdate其他事件慎用
video.addEventListener("timeupdate",function (){ //当视频的currentTime大于0.1时表示黑屏时间已过,已有视频画面,可以移除浮层(.pagestart的div元素) if ( !video.isPlayed && this.currentTime>0.1 ){ $(".pagestart").fadeOut(500); video.isPlayed = !0; } })框架中使用 react中使用
因我们实现h5播放效果,需要在video上设置属性。但我们知道react自定义属性,需要添加data-前缀。使得生成的节点属性 并不是 x5要求的属性。造成失效。
componentDidMount: function() { var element = ReactDOM.findDOMNode(this.refs.test); element.setAttribute("custom-attribute", "some value"); }
See https://jsfiddle.net/peterjma...
自定义属性将会被原生支持在React 16,这个在RC版本中的特性,以及即将被公布。这意味着,加入自定义属性在元素中将会非常简单:
render() { return ( ); }
ref={(node) => { if(node){node.setAttribute("xmlns:xlink", "w3.org/1999/xlink")} }}vue中使用
直接放在template中就可以了
可能遇到的问题(坑)
安卓手机中全屏播放视频,在左右会出现大概一像素的边线暴露,不能完全覆盖屏幕。如下图
解决方法:监听屏幕全屏事件中( video.addEventListener) 手动设置video 的left值为 0。
问题图 | |
---|---|
https://github.com/gnipbao/ib...
https://x5.tencent.com/tbs/gu...
http://zhaoda.net/2014/10/30/...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/11024.html
摘要:但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题,并且可以实现交互。 本文在H5动效的常见制作手法的基础上,对相印的H5动效制作手法进行了扩展和整理,并结合案例谈谈怎么将其做得生动。 视频类 1、体验案例 视频类h5可以带给用户动效逼真,流畅的体验。虽然说制作视频的难度较大,但是瑕不掩瑜,一支视频可以尽可能地创造出...
阅读 2423·2019-08-29 13:53
阅读 2507·2019-08-29 11:32
阅读 3047·2019-08-28 17:51
阅读 3776·2019-08-26 10:45
阅读 3492·2019-08-23 17:51
阅读 2983·2019-08-23 16:56
阅读 3336·2019-08-23 16:25
阅读 3085·2019-08-23 14:15