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就非常好用