H5实例教学--微信内嵌视频2（素材来自腾讯孙尚香末日机甲皮肤宣传H5）

hyuan 发布于2019-08-01 16:24 / 3138人阅读

摘要：说明在以下开始您的自定义代码行后的新行上添加您的自定义代码。单击此元件实例时，此代码将执行。开始您的自定义代码此示例代码在输出面板中显示已单击鼠标。

结合之前的两篇解析

微信内嵌视频1（案例浅析）
https://segmentfault.com/a/11...
从AnimateCC到CreateJS入门
https://segmentfault.com/a/11...

这次是一篇createjs完成UI 结合内联视频实现的一个demo

因为忘了原地址所以大家只能自己下demo跑一下简单的效果了

需要简单搭建一个服务器来跑不然createjs对图片资源引用

稍微解析一下总结实现思路

主要是由两个标签实现

video标签实现在手机端内嵌视频播放

canvas标签控制ui层，以及在对UI进行交互时，对视频进行操作

首先将fla文件导出成代码

生成的代码如下：

与上次不同的是本次发布的代码多了一段自适应屏幕尺寸的代码，这是animateCC2017的新功能

在发布设置中

勾选以上内容，animateCC会生成自适应手机宽高的页面
ok那么进入正题，需要实现动画和视频的交互，需要在animate的帧中触发一些事件
需要使用到一个createJs的类
EventDispatcher管理队列的事件侦听器和事件分发提供了方法。

var model = new createjs.EventDispatcher();

new 一个实例然后

model.addEventListener("videoPlay1", function () {
    Loop(video, 0)
})

监听某触发的事件
然后用animateCC打开fla文件

打开page1

可以看到在时间轴上我已经加了一些代码片段

右键对应的帧选择动作

/* Mouse Click 事件
单击此指定的元件实例会执行您可在其中添加自己的自定义代码的函数。

说明:
1. 在以下"// 开始您的自定义代码"行后的新行上添加您的自定义代码。
单击此元件实例时，此代码将执行。
*/

this.enter_btn.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
    // 开始您的自定义代码
    // 此示例代码在"输出"面板中显示"已单击鼠标"。
    console.log(111)
    this.gotoAndPlay(20);
    if(model)model.dispatchEvent("videoPlay1");
    // 结束您的自定义代码
}

在弹窗的动作窗口中看到已有的代码
这代码需要解释一下
enter_btn这个变量需要自己对某个元素进行命名，这里才能调用到

点击此元素

这个命名需要在该元素第一次出现在时间轴上的那一帧就命名，否则有可能出现无法调用的情况。

那么上面那段代码就是点击此按钮，跳转到第20帧，并触发"videoPlay1"事件
而我们用刚刚new的时间监听的model类在外部的js监听了这个事件，就可以在对应的地方对视频进行操作了

function Loop(obj, index) {
    if (obj.timer) {
        clearInterval(obj.timer);
    }
    obj.play();
    obj.timer = setInterval(function () {
        var t = obj.currentTime;
        //视频循环时间点
        if (Math.abs(t - videoTimeArr[3 * index + 1]) <= .1) {
            obj.currentTime = videoTimeArr[3 * index];
            // obj.play();
            // clearInterval(obj.timer);
        }
        //动画播放时间点
        if (Math.abs(t - videoTimeArr[3 * index + 2]) <= .1) {
            playAnimate(index);
        }
    }, 20);
}

将视频对象传入，并开启一个定时器，判断视频进度是否达到我们需要的循环点，如果到了则回到初始点循环播放
后面还有一个地方，有个返回按钮，而按钮也有对应的返回的视频片段，在点击返回时播放对应视频片段，并回到目标时间点

function unloop(obj, index) {
    if (obj.timer) {
        clearInterval(obj.timer);
    }
    obj.currentTime = videoBackwardTimeArr[3 * index];
    obj.play();
    obj.timer = setInterval(function () {
        var t = obj.currentTime;
        if (Math.abs(t - videoBackwardTimeArr[3 * index + 1]) <= .1) {
            obj.currentTime = videoBackwardTimeArr[3 * index + 2];
            obj.play();
            Loop(obj, 0)
            var view = stage.children[0].view;
            view.gotoAndStop(29)
        }
    }, 20);
}

下面附demo代码，谢谢

链接: http://pan.baidu.com/s/1mijrS7Y 密码: pth1

云服务器混合云微信内h5页面打开小程序孙尚香 h5实时视频腾讯云 h5加腾讯云视频直播

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

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

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实例教学--微信内嵌视频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