使用原生的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