angular7中使用ckplayer插件实现各大浏览器视频播放功能

使用原生的video属性，虽然主流浏览器都可以播放，但是在IE中会出现错误：（提示：视频类型不受支持或者文件路径无效）

下载ckplayer.js文件

可以在github或者我的下载资源中下载即可，目录结构如下：

angular.json中引入

"scripts": [
	"node_modules/swiper/dist/js/swiper.min.js",
     "node_modules/wowjs/dist/wow.js",
     "src/assets/ckplayer/ckplayer.js"
 ],

video-report.component.ts中使用

declare var ckplayer: any;

export class VideoReportComponent implements OnInit {

    player: any;
    
    videoList: any[] = [];

    activeVideoIndex = 0;

    constructor(
        private newsService: NewsService,
    ) {}

    ngOnInit() {
        // 获取视频列表数据
        this.getVideoList();
    }

    // 初始化
    videoPlay(url: any) {
        const videoObject = {
            container: '#video', // 绑定容器id
            variable: 'player', // 初始函数
            // loop: true, // 播放结束是否循环播放
            autoplay: false, // 自动播放
            video: url
        };
        this.player = new ckplayer(videoObject);
    }
    
    // 视频列表
    getVideoList() {
        // tslint:disable-next-line: max-line-length
        this.newsService.getNewsList(this.newsConditions.NoticeType, this.newsConditions.PageIndex, this.newsConditions.PageSize, (data: any) => {
            if (data.IsSucceed) {
                this.videoList = data.Data;
                this.newsConditions.TotalCount = data.TotalCount;
                this.videoPlay(data.Data[0].videourl);
                setTimeout(() => {
                    this.swiperInit();
                }, 300);
            }
        });
    }

    // 获取当前的视频列表
    getNowVideoInfo(url: string, index: number) {
        this.videoPlay(url); // 动态点击视频传递视频地址
        this.activeVideoIndex = index;
    }

}

html中使用

<div class="video wow fadeIn">
    <div id="video" class="video"></div> // 视频容器
</div>

采坑

可能在网上看到在初始化的时候有人多写了个live: true,属性，这个会导致视频没有进度，并且视频时间长度会显示当前本机时间的错误问题。

• 可以直接删掉live属性
• 也可以将live:true的属性值设置为false