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

結合以前的兩篇解析

微信內嵌視頻1（案例淺析）
https://segmentfault.com/a/11...
從AnimateCC到CreateJS入門
https://segmentfault.com/a/11...

此次是一篇createjs完成UI 結合內聯視頻實現的一個demo

由於忘了原地址因此你們只能本身下demo跑一下簡單的效果了

須要簡單搭建一個服務器來跑否則createjs對圖片資源引用

稍微解析一下總結實現思路

主要是由兩個標籤實現

video標籤實如今手機端內嵌視頻播放

canvas標籤控制ui層，以及在對UI進行交互時，對視頻進行操做

首先將fla文件導出成代碼

生成的代碼以下：

<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
   canvas = document.getElementById("canvas");
   anim_container = document.getElementById("animation_container");
   dom_overlay_container = document.getElementById("dom_overlay_container");
   images = images||{};
   ss = ss||{};
   var loader = new createjs.LoadQueue(false);
   loader.addEventListener("fileload", handleFileLoad);
   loader.addEventListener("complete", handleComplete);
   loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt) { 
   if (evt.item.type == "image") { images[evt.item.id] = evt.result; }    
}
function handleComplete(evt) {
   //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
   var queue = evt.target;
   var ssMetadata = lib.ssMetadata;
   for(i=0; i<ssMetadata.length; i++) {
      ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
   }
   exportRoot = new lib.demo3();
   stage = new createjs.Stage(canvas);
   stage.addChild(exportRoot);    
   //Registers the "tick" event listener.
   fnStartAnimation = function() {
      createjs.Ticker.setFPS(lib.properties.fps);
      createjs.Ticker.addEventListener("tick", stage);
   }      
   //Code to support hidpi screens and responsive scaling.
   function makeResponsive(isResp, respDim, isScale, scaleType) {    
      var lastW, lastH, lastS=1;    
      window.addEventListener('resize', resizeCanvas);      
      resizeCanvas();       
      function resizeCanvas() {        
         var w = lib.properties.width, h = lib.properties.height;         
         var iw = window.innerWidth, ih=window.innerHeight;       
         var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;       
         if(isResp) {                
            if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                    
               sRatio = lastS;                
            }           
            else if(!isScale) {                
               if(iw<w || ih<h)                  
                  sRatio = Math.min(xRatio, yRatio);          
            }           
            else if(scaleType==1) {                
               sRatio = Math.min(xRatio, yRatio);          
            }           
            else if(scaleType==2) {                
               sRatio = Math.max(xRatio, yRatio);          
            }        
         }        
         canvas.width = w*pRatio*sRatio;          
         canvas.height = h*pRatio*sRatio;
         canvas.style.width = dom_overlay_container.style.width = anim_container.style.width =  w*sRatio+'px';           
         canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
         stage.scaleX = pRatio*sRatio;        
         stage.scaleY = pRatio*sRatio;        
         lastW = iw; lastH = ih; lastS = sRatio;       
      }
   }
   makeResponsive(true,'height',true,1);  
   fnStartAnimation();
}
</script>

與上次不一樣的是 本次發佈的代碼多了一段自適應屏幕尺寸的代碼，這是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