摘要:但好在中,新增了属性,可以使视频内联播放。以上为该案例主要需要解决的问题。补充资料视频播放优化
以上为案例二维码
首个H5案例解析
从头开始分析
在 iOS 上,APP 都是使用的系统自带的浏览器进行页面渲染,video 播放视频的效果是统一的,只需要考虑不同的 iOS 版本是否有不一致的地方。在 iOS 上,播放视频默认会弹出一个播放器全屏播放视频,如下效果
播放器上下有的系统默认的控制栏,可以控制视频的播放进度、音量以及暂停或继续播放,播放视频时,视频会 “浮” 在页面上,页面上的所有元素都只能是在视频下面,这种效果显然不是我们想要的。
但好在 iOS 10 Safari 中,video 新增了 playsinline 属性,可以使视频内联播放。(微信浏览器支持)
在 webkit 的 blog 上提到
A note about the playsinline attribute: this attribute has recently been added to the HTML specification, and WebKit has adopted this new attribute by unprefixing its legacy webkit-playsinline attribute. This legacy attribute has been supported since iPhoneOS 4.0, and accordance with our updated unprefixing policy, we’re pleased to have been able to unprefix webkit-playsinline.
来源: http://www.cnblogs.com/zzsdre...
安卓实现:
TBS 内核(>=036849)支持一个叫 同层播放器 的视频播放器,这个不需要申请白名单,只需给 video 设置两个属性 x5-video-player-type="h5" 和 x5-video-player-fullscreen="true",播放效果
结合IOS和安卓微信下同层播放器的实现代码:
稍微讲一下video的事件
此案例并没有使用timeupdate时间来实现播放进度的监听
在此案例中
要实现第一段视频播放完,出现选项给用户进行视频的选择交互。
我们需要在出现选项时将视屏暂停,
先来看下代码:
function getTime(obj){ obj.timer = setInterval(function(){ var t = obj.currentTime; if(isAndroid) { // 选项出现 if(Math.abs(t - 32.13) <= .1 && istest) { selectBtn.style.display = "block"; obj.pause(); clearInterval(obj.timer); } // // 墨鏡播放完必,镯子播放完毕,帽子播放完毕 if(Math.abs(t) > 46.04 && typenum == 1 || Math.abs(t) > 65.16 && typenum == 2 || Math.abs(t) > 80.64 && typenum == 4) { selectBtn.style.display = "block"; obj.pause(); istest = true; clearInterval(obj.timer); } } else { // 选项出现 if(Math.abs(t - 32.13) <= .1 && istest) { selectBtn.style.display = "block"; // obj.currentTime = 32.13; obj.pause(); clearInterval(obj.timer); } // // 墨鏡播放完必,镯子播放完毕,帽子播放完毕 if(Math.abs(t) > 46.04 && typenum == 1 || Math.abs(t) > 65.16 && typenum == 2 || Math.abs(t) > 80.24 && typenum == 4) { selectBtn.style.display = "block"; obj.currentTime = 32.13; obj.pause(); istest = true; clearInterval(obj.timer); } } // 项链播放,提前呼出点击按钮 if(t > 172) { // aLink.style.display = "block"; // window.location.href = "http://wag.i-h5.cn/dj/wyf/fenx.html"; } },20); } /** * 视频开始play */ video.addEventListener("play", function(){ // ovstatus = 1; console.log("play") getTime(this); }, false);
该案例使用了定时器,在视频开始事件触发时开始每20ms触发一次,判断当前视频进度,若到达需停止的进度时(第一段片段播放完毕,或选项片段结束时),暂停视频,并出现浮层div块,为用户提供交互。
点击选项后跳到对应的进度,继续播放视频。以上为该案例主要需要解决的问题。
安卓浏览器左上角会出现推出播放的返回按钮,当点击按钮时将退出播放
退出播放时,我们需要做相应的处理。TBS 有提供相应的事件,不过不同的版本有一点差异
TBS < 036849 036849 <= TBS < 036900 036900 <= TBS 是否支持同层播放器 否 是 是 退出全屏播放时触发 x5videoenterfullscreen x5videoexitfullscreen 进入全屏播放时触发 x5videoexitfullscreen x5videoenterfullscreen 通过监听这两个事件就可以知道当前的播放状态 document.getElementById("video").addEventListener("x5videoexitfullscreen", function(){ alert("exit fullscreen") }) document.getElementById("video").addEventListener("x5videoenterfullscreen", function(){ alert("enter fullscreen") })
在对话框中发送 //gettbs 可以查看相关信息,tbsCoreVersion 就是当前安装的 TBS 内核版本。
补充资料:
H5视频播放优化:
http://www.xuanfengge.com/htm...
videoAPI:
http://www.w3school.com.cn/ta...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/50473.html
摘要:但好在中,新增了属性,可以使视频内联播放。以上为该案例主要需要解决的问题。补充资料视频播放优化 showImg(https://segmentfault.com/img/bVJCVu?w=133&h=136); 以上为案例二维码 首个H5案例解析 从头开始分析 在 iOS 上,APP 都是使用的系统自带的浏览器进行页面渲染,video 播放视频的效果是统一的,只需要考虑不同的 iOS ...
摘要:说明在以下开始您的自定义代码行后的新行上添加您的自定义代码。单击此元件实例时,此代码将执行。开始您的自定义代码此示例代码在输出面板中显示已单击鼠标。 结合之前的两篇解析 微信内嵌视频1(案例浅析)https://segmentfault.com/a/11...从AnimateCC到CreateJS入门https://segmentfault.com/a/11... 这次是一篇creat...
摘要:说明在以下开始您的自定义代码行后的新行上添加您的自定义代码。单击此元件实例时,此代码将执行。开始您的自定义代码此示例代码在输出面板中显示已单击鼠标。 结合之前的两篇解析 微信内嵌视频1(案例浅析)https://segmentfault.com/a/11...从AnimateCC到CreateJS入门https://segmentfault.com/a/11... 这次是一篇creat...
阅读 2472·2021-11-17 09:33
阅读 759·2021-11-04 16:13
阅读 1330·2021-10-14 09:50
阅读 693·2019-08-30 15:53
阅读 3658·2019-08-30 14:18
阅读 3269·2019-08-30 14:14
阅读 2094·2019-08-30 12:46
阅读 3179·2019-08-26 14:05