angular中使用ckplayer播放器
angular中使用ckplayer播放器
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>
//参数的定义回调 //定义视频对象，可以来自服务器 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); }
posted on 2018-08-22 18:23 一 定 会 去 旅 行 阅读(…) 评论(…) 编辑 收藏
版权声明：本文为jying原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。