标签：element pes 没有 controls containe 就会 播放 css 开始
技术 ：angular/cli , html5 , typescript , scss ,es 6 ...
项目类型：直播视频与视频回放
使用到 插件 ： videojs + ckplayer
遇到的问题：
1. 一开始使用 flv.js 插件播放flv格式类型，遇到的问题 40M 以下可以播放出来，超过一定视频文件大小就会出现异常。
解决方案：使用 ckplayer 插件代替flv插件
ckplayer 使用方法：
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);
flv.js 使用方法：
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 }
2.videojs 在创建播放器的时候每次都要实例化并且加载新的播放器，不然播放会没有效果；
使用方法：
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();
欢迎各位前辈评论指教！！！
标签：element pes 没有 controls containe 就会 播放 css 开始
原文地址：https://www.cnblogs.com/Anjjie/p/9777212.html
