H5實例教學--微信內嵌視頻2（素材來自騰訊孫尚香末日機甲皮膚宣傳H5）

hyuan 發布于2019-08-01 16:24 / 3339人閱讀

摘要：說明在以下開始您的自定義代碼行后的新行上添加您的自定義代碼。單擊此元件實例時，此代碼將執行。開始您的自定義代碼此示例代碼在輸出面板中顯示已單擊鼠標。

結合之前的兩篇解析

微信內嵌視頻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. 在以下"http:// 開始您的自定義代碼"行后的新行上添加您的自定義代碼。
單擊此元件實例時，此代碼將執行。
*/

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

GPU云服務器云服務器微信內h5頁面打開小程序孫尚香 h5實時視頻騰訊云 h5加騰訊云視頻直播

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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