H5实例教学--微信内嵌视频1（案例浅析）

Euphoria 发布于2019-08-05 10:47 / 937人阅读

摘要：但好在中，新增了属性，可以使视频内联播放。以上为该案例主要需要解决的问题。补充资料视频播放优化

以上为案例二维码
首个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...

超融合服务器专线服务微信内h5页面打开小程序 webrtc 微信内华为 webrtc h5案例微信h5

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55953.html

H5实例教学--微信内嵌视频1（案例浅析）

摘要：但好在中，新增了属性，可以使视频内联播放。以上为该案例主要需要解决的问题。补充资料视频播放优化 showImg(https://segmentfault.com/img/bVJCVu?w=133&h=136); 以上为案例二维码首个H5案例解析从头开始分析在 iOS 上，APP 都是使用的系统自带的浏览器进行页面渲染，video 播放视频的效果是统一的，只需要考虑不同的 iOS ...

quietin 2019-08-20 14:29 评论0 收藏0
H5实例教学--微信内嵌视频1（案例浅析）

摘要：但好在中，新增了属性，可以使视频内联播放。以上为该案例主要需要解决的问题。补充资料视频播放优化 showImg(https://segmentfault.com/img/bVJCVu?w=133&h=136); 以上为案例二维码首个H5案例解析从头开始分析在 iOS 上，APP 都是使用的系统自带的浏览器进行页面渲染，video 播放视频的效果是统一的，只需要考虑不同的 iOS ...

Riddler 2019-08-01 16:22 评论0 收藏0
H5实例教学--微信内嵌视频2（素材来自腾讯孙尚香末日机甲皮肤宣传H5）

摘要：说明在以下开始您的自定义代码行后的新行上添加您的自定义代码。单击此元件实例时，此代码将执行。开始您的自定义代码此示例代码在输出面板中显示已单击鼠标。结合之前的两篇解析微信内嵌视频1（案例浅析）https://segmentfault.com/a/11...从AnimateCC到CreateJS入门https://segmentfault.com/a/11... 这次是一篇creat...

spademan 2019-08-20 14:32 评论0 收藏0
H5实例教学--微信内嵌视频2（素材来自腾讯孙尚香末日机甲皮肤宣传H5）

摘要：说明在以下开始您的自定义代码行后的新行上添加您的自定义代码。单击此元件实例时，此代码将执行。开始您的自定义代码此示例代码在输出面板中显示已单击鼠标。结合之前的两篇解析微信内嵌视频1（案例浅析）https://segmentfault.com/a/11...从AnimateCC到CreateJS入门https://segmentfault.com/a/11... 这次是一篇creat...

amc 2019-08-05 10:49 评论0 收藏0
H5实例教学--微信内嵌视频2（素材来自腾讯孙尚香末日机甲皮肤宣传H5）

摘要：说明在以下开始您的自定义代码行后的新行上添加您的自定义代码。单击此元件实例时，此代码将执行。开始您的自定义代码此示例代码在输出面板中显示已单击鼠标。结合之前的两篇解析微信内嵌视频1（案例浅析）https://segmentfault.com/a/11...从AnimateCC到CreateJS入门https://segmentfault.com/a/11... 这次是一篇creat...

hyuan 2019-08-01 16:24 评论0 收藏0