angular中使用ckplayer播放器

原文地址：https://www.cnblogs.com/jying/p/9519557.html ，转载请说明出处。

ckplayer官网：http://www.ckplayer.com

使用ckplayer 需要引用ckplayer.js，不管你是直接html中引入还是按需加载都必不可少，此处我们以html引入为例

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

方式一：直接 html 页面 <script> 标签中使用，实例可查看官网：http://www.ckplayer.com/manualX/17.html

方式二：单独 js 文件中使用，形式其实与方式一无异，但切记不可放在 (function(){})() 中使用，否则自定义的监听事件无效。

方式三（推荐）：自定义指令 directive 使用。

/**
 * 自定义视频指令文件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);
    }

移动端浏览器播放视频会自动全屏，无法限制其拖动快进，可以参照我的另一篇文章解决：https://www.cnblogs.com/jying/p/9642445.html

个人小站欢迎来踩：驾校教练评价平台 | 为爱豆砌照片墙