欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端页面播放 rtmp 流与 flv 格式视频文件

程序员文章站 2022-06-17 11:49:04
技术 :angular/cli , html5 , typescript , scss ,es 6 ... 项目类型:直播视频与视频回放 使用到 插件 : videojs + ckplayer 遇到的问题: 1. 一开始使用 flv.js 插件播放flv格式类型,遇到的问题 40M 以下可以播放出来 ......

技术 :angular/cli , html5 , typescript , scss ,es 6 ...

项目类型:直播视频与视频回放

使用到 插件 : videojs + ckplayer

遇到的问题:

  1. 一开始使用 flv.js 插件播放flv格式类型,遇到的问题 40m 以下可以播放出来,超过一定视频文件大小就会出现异常。

  解决方案:使用 ckplayer 插件代替flv插件

  ckplayer 使用方法:

前端页面播放 rtmp 流与 flv 格式视频文件
1         var videoobject = {
2             container: '#name' , //容器的id或classname
3             variable: 'player',//播放函数名称
4             flashplayer: true,
5             video: [//视频地址列表形式
6                 ["url链接", 'video/flv', '中文标清', 0]
7             ]
8         };
9         var player = new ckplayer(videoobject);
ckplayer

  flv.js 使用方法:

前端页面播放 rtmp 流与 flv 格式视频文件
1 if (flvjs.issupported()) {
2             const flvplayer = flvjs.createplayer({
3                 type: "flv",
4                 url: url
5             });
6             flvplayer.attachmediaelement(videoelement);//videoelement:h5 video 元素
7             flvplayer.load();
8             flvplayer.play();
9     }
flv.js

  2.videojs 在创建播放器的时候每次都要实例化并且加载新的播放器,不然播放会没有效果;

  使用方法:

前端页面播放 rtmp 流与 flv 格式视频文件
 1 html:
 2 <video id="{{ obj }}" class="video video-js vjs-big-play-centered" preload="auto" data-setup="{}" autoplay controls="controls">
 3           <source [src]="safeurl" type='rtmp/flv'>
 4         </video>
 5 
 6 -----------------------------------------------------------------------------------------
 7 实例化:
 8 var videos = document.getelementsbytagname('video');//获取所有的h5元素 video 
 9         for (i = 0; i < videos.length; i++) {
10           var video = videos[i];
11           if (video.classname.indexof('video-js') > -1) {
12             videojs(video.id).ready(function () {//实例化播放器
13             });
14           }
15         }
16 
17 -----------------------------------------------------------------------------------------
18 单击更换播放链接:
19 var _video = videojs("video_index_1");
20             _video.src(url);
21             _video.play();
videojs

 

欢迎各位前辈评论指教!!!