angular中直播页面的制作(一)

最新推荐文章于 2023-07-07 14:08:37 发布

原创最新推荐文章于 2023-07-07 14:08:37 发布 · 置顶 · 599 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#angular #html5 #javascript

video 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了在Angular项目中使用ckPlayer播放RTMP格式视频的步骤与注意事项，包括ckPlayer的安装配置、代码实现及浏览器兼容性问题解决。

近期公司有这样一个需求，要求在运维后台中查看所有站点的视频监控。简单来说就是做一个直播网页，能够查看实时视频。我们的运维后台是基于angular7为技术栈的项目，视频流的格式是rtmp格式，这种格式的视频就无法用html中的video标签来进行播放。由于之前对视频相关的内容不甚了解，查阅相关文档后，也有了初步的认识。根据视频流格式，选定了ckPlayer和video.js两种方案。

我本人比较倾向于使用ckPlayer，也在项目中使用了，不过发现了很多问题，由于我们的需求方使用的浏览器很多，所以要求要兼容主流浏览器，而ckPlayer在火狐和safari上的播放情况不是很好，safari上出现插件崩溃的次数很多，我又尝试了video.js，这次在浏览器兼容方面改善很多，不过也是在一个有一个坑里爬出来的。言归正传，我将下文中一步一步讲解如何在anuglar中使用ckPlayer

在ckPlayer官网下载最新的代码包（http://www.ckplayer.com/down/）
把解压后的包文件放到assets文件下
在angular.json中引入文件，效果等同于在index.html中用script标签引入

4. 在src文件夹下建一个typings.d.ts文件，全局声明变量

declare var ckplayer: any;

5.在播放页面使用ckPlayer

<div id="video"></div>

  createVideo() {
    var videoObject = {
        container: '#video',//“#”代表容器的ID，“.”或“”代表容器的class
        variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象
        autoplay: true,//自动播放
        live: true,
        poster: 'material/poster.jpg', //视频封面
        video:'rtmp://58.200.131.2:1935/livetv/hunantv'//视频地址
    };
    this.player = new ckplayer(videoObject);
  }

在播放视频时，一定要在ngAfterViewInit生命周期里调用，太早调用，dom元素没有挂载成功，会获取不到播放容器也会造成视频播放失败。

以上就是我在使用ckPlayer中的一些心得，希望对各位能有所帮助