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 一 定 会 去 旅 行 阅读(…) 评论(…) 编辑 收藏