angular中使用ckplayer播放器

時間 2019-11-12

標籤 angular 使用 ckplayer 播放欄目 AngularJS 简体版

原文原文鏈接

原文地址：http://www.javashuo.com/article/p-mcdillnk-cq.html ，轉載請說明出處。html

ckplayer官網：http://www.ckplayer.comios

使用ckplayer 須要引用ckplayer.js，無論你是直接html中引入仍是按需加載都必不可少，此處咱們以html引入爲例瀏覽器

   <script src="你項目的路徑/ckplayer.js" charset="UTF-8"></script>

方式一：直接 html 頁面 <script> 標籤中使用，實例可查看官網：http://www.ckplayer.com/manualX/17.html服務器

方式二：單獨 js 文件中使用，形式其實與方式一無異，但切記不可放在 (function(){})() 中使用，不然自定義的監聽事件無效。app

方式三（推薦）：自定義指令 directive 使用。dom

/**
 * 自定義視頻指令文件samVideo.ts,至關於app.directive("samVideo",...);
 */

export default class directive implements ng.IDirective {
    static $instance = (): ng.IDirective => {
        return new directive();
    };
    constructor() {}
    scope = {
        video: "=",//來自服務器的視頻參數能夠放在這
        videocb: "=" //回調函數寫在這
    };
    restrict = 'AE'; //屬性或控件方式
    replace = true;
    link(scope: ng.IScope, element: ng.IRootElementService, attrs: any, ctrl: any) {
        // console.log("scope = ", scope, scope.video);
        if (scope.video) {//判斷是否包含視頻路徑等參數

            var ckplayer = window["ckplayer"];//html引入ckplayer.js文件後window中可查看到ckplyer的dom
            var videoObject = {
                // autoplay: true,//自動執行
                container: "#video_view",//綁定容器id
                debug: true, //是否開啓調試模式
                // drag: 'start', //拖動的屬性
                // flashplayer: true,//強制flash
                // loaded: 'loadedHandler', //當播放器加載後執行的函數，設定一些監聽，官方js中的寫法
                loaded: scope.videocb.videocallback(scope.videocb),//此處是重點回調
                // loop: true, //播放結束是否循環播放
                //mobileCkControls:true,//是否在移動端（包括ios）環境中顯示控制欄
                //poster: 'o_1cku5daia5vroa4psl17pipm5m.jpg', //封面圖片
                // seek: 0, //默認跳轉的時間
                variable: "player",//初始函數
                // video: "CK:" + scope.video.video_url,//加密後強制變爲flash方式，沒法在移動端觀看視頻，移動端不支持flash。
                video: scope.video.video_url //來自服務器的視頻地址
            }

            var player = new ckplayer(videoObject);
            scope.videocb.player = player;

        }
    };
}

<sam-Video id="video_view" style="width:100%;" ng-if="vm.videoDetails" video="vm.videoDetails" videocb="vm.videocb"></sam-Video>

    
　　 //在Controller中
    //參數的定義回調
    //定義視頻對象，能夠來自服務器
    videoDetails = {
        content: "測試外網視頻",
        create_date: 1534316308000,
        img_url: "o_1cku5ia5vroa4psl17pipm5m.jpg",//封面圖片
        title: "外網視頻",
        video_url: "視頻地址.mp4 或CK:加密的視頻地址(強制flash模式）"//視頻地址
    };
    //回調參數，裏面定義了一個回調函數，而後由directive回調的時候回傳ckplayer對象own，並使用$timeout延遲加載以確保不爲null
    videocb = {
        videocallback: (own) => {
            if (this.timeout) {
                this.$timeout.cancel(this.timeout);
            }
            this.timeout = this.$timeout(x => {

                // console.log("timeout player = ", this.videocb["player"], own.player);
                own.player.addListener('ended', this.endedHandler); //監聽播放結束

            }, 0);
            // console.log("player = ", this.videocb, player.player.CB);
        }
    };
    //監聽是否結束播放，使用lambda表達式能夠使用整個controller的this
    endedHandler = () => {
        console.log("播放結束2", this);
    }