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

女爷i 2024-04-17 15:11 72阅读 0赞

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

#### 下载ckplayer.js文件 ####

可以在github或者我的下载资源中下载即可，目录结构如下：  
![在这里插入图片描述][20190827192013746.png]

#### 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中使用 ####

#### 采坑 ####

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

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

[20190827192013746.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/231d7ad7f1044ddaa5938b9c5687a763.png