flv基本使用和自定义提示

龙谷情Sinoam

已于 2022-01-26 16:04:00 修改

阅读量295

点赞数

文章标签： html jquery ajax rtmp canvas

于 2022-01-20 09:56:00 首次发布

本文链接：https://blog.csdn.net/qq_36012282/article/details/122613639

版权

1.基本使用

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 6     <title>flv.js demo</title>
 7     <style>
 8         .mainContainer {
 9             display: block;
10             width: 1024px;
11             margin-left: auto;
12             margin-right: auto;
13         }
14     </style>
15 </head>
16 <body>
17 <div class="mainContainer">
18     <video id="videoElement" class="centere dVideo" controls autoplay width="1024" height="576"></video>
19     <button onclick="destoryVideo()">销毁</button>
20 </div>
21 <br>
22 <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.1/flv.min.js"></script>
23 <script>
24 
25     var videoElement = document.getElementById('videoElement');
26     if (flvjs.isSupported()) {
27         var flvPlayer = flvjs.createPlayer({
28             type: 'flv',
29             isLive: true,//<====如果是直播，加个这个
30             hasAudio: true,
31             // url:'https://ip:port/live?stream=876543'
32             url: '杞人忧天_标清.flv'
33 
34         });
35         flvPlayer.attachMediaElement(videoElement);
36         flvPlayer.load(); //加载
37         flvPlayer.play();
38     }
39 
40     function destoryVideo() {
41         if(flvPlayer !='' &&flvPlayer != null){
42             setTimeout(() => {
43                 flvPlayer.pause();
44                 flvPlayer.unload();
45                 flvPlayer.detachMediaElement();
46                 flvPlayer.destroy();
47                 flvPlayer = null;
48             }, 500);
49         }
50     }
51 
52     function play() {
53         flvPlayer.unload();
54         flvPlayer.play();
55     }
56 </script>
57 </body>
58 
59 </html>

2.如果视频流出现问题，用户又想要一个个性化的提示

flvPlayer.on('error', err => {
     alert("视频流无法连接");
});

如果视频流有问题，则会执行这个方法$message就非常好用

龙谷情Sinoam

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
flv基本使用和自定义提示

flv基本收i用视频流出现问题，用户又想要一个个性化的提示
复制链接

扫一扫

flv基本使用和自定义提示

“相关推荐”对你有帮助么？