因为项目测试需要，我需要可以快速知道自己推流的多路视频流质量，于是我想到可以使用html网页来播放视频，实现效果极其简单，方法有好几种，以下是几种记录：
注意：测试过，VLC需要使用360急速浏览器，于是以下都是基于360急速浏览器测试的：
一、Demo1：iframe
video_url_player.html代码:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<html> <head> <style> html,body,div{margin:1px;padding:0px;} td{padding:0px 1px 1px 0px;} table{border-collapse:collapse;border:0px solid #ff0000;text-align:center;} </style> </head> <body> <table width=100% height=100%> <tr> <td><iframe frameborder=0 src=http://vfx.mtime.cn/Video/2021/11/16/mp4/211116131456748178.mp4 width=100% height=100%></iframe></td> <td><iframe frameborder=0 src=http://vfx.mtime.cn/Video/2021/11/16/mp4/211116131456748178.mp4 width=100% height=100%></iframe></td> <td><iframe frameborder=0 src=http://vfx.mtime.cn/Video/2021/11/16/mp4/211116131456748178.mp4 width=100% height=100%></iframe></td> </tr> <tr> <td><iframe frameborder=0 src=http://vfx.mtime.cn/Video/2021/11/16/mp4/211116131456748178.mp4 width=100% height=100%></iframe></td> <td><iframe frameborder=0 src=http://vfx.mtime.cn/Video/2021/11/16/mp4/211116131456748178.mp4 width=100% height=100%></iframe></td> </tr> </table> </body> </html> |
效果：
说明：
1. 支持几种常见的播放格式，无论是本地还是网络视频流都可以
2. 支持的格式不是特别多，一些特殊格式，无法播放
二、Demo2：VLC插件
需要安装VLC，然后就可以了，不过浏览器必须使用低版本的浏览器，测试一下很多浏览器不行，但是发现360急速浏览器就不需要所谓的低版本。
html代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<html> <head> </head> <body> <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc" target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4"> </embed> <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc" target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4"> </embed> <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc" target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4"> </embed> <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc" target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4"> </embed> <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc" target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4"> </embed> <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc" target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4"> </embed> <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc" target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4"> </embed> <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc" target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4"> </embed> <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc" target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4"> </embed> <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc" target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4"> </embed> <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc" target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4"> </embed> <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc" target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4"> </embed> </body> </html> |
效果：
说明：
可以自由排布，以及支持非常多的格式，只要安装好环境以后，就可以使用，只是浏览器比较麻烦，但是效果和质量是真的好。
三、Demo3：使用一些常见的js
优势：嵌入简单，而且自动使用OpenGL渲染，有些支持硬件加速。
1. veoplayer
html代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>videoplayer</title> <script src="./veoplayer.global.min.js"></script> <style> /* 容器元素 */ .container { display: grid; grid-template-columns: repeat(3, 1fr); /* 列数为3，每列平均分配剩余空间 */ grid-template-rows: repeat(4, 1fr); /* 行数为4，每行平均分配剩余空间 */ grid-gap: 10px; /* 单元格之间的间距 */ } /* 单元格元素 */ .cell { background-color: #ccc; /* 背景颜色 */ padding: 20px; /* 内边距 */ text-align: center; /* 文字居中 */ } </style> </head> <body> <canvas id="video-canvas"></canvas> <script type="text/javascript"> document.addEventListener('click', () => { let player = new JSMpeg.Player("rtsp://127.0.0.1:8554/live",{ canvas: document.getElementById('jsmpeg-canvas'), // 要在用户点击过页面后，才可以播放声音 // audio: false, }) }, { once: true }) </script> <div class="container"> <div class="cell" id="veo0"></div> <div class="cell" id="veo1"></div> <div class="cell" id="veo2"></div> <div class="cell" id="veo3"></div> <div class="cell" id="veo4"></div> <div class="cell" id="veo5"></div> <div class="cell" id="veo6"></div> <div class="cell" id="veo7"></div> <div class="cell" id="veo8"></div> <div class="cell" id="veo9"></div> <div class="cell" id="veo10"></div> <div class="cell" id="veo11"></div> </div> <script type="text/javascript"> let player0 = new VeoPlayer({ id: "veo0", autoplay: true, url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); </script> <script type="text/javascript"> let player1 = new VeoPlayer({ id: "veo1", autoplay: true, url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); </script> <script type="text/javascript"> let player2 = new VeoPlayer({ id: "veo2", autoplay: true, url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); </script> <script type="text/javascript"> let player3 = new VeoPlayer({ id: "veo3", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); </script> <script type="text/javascript"> let player4 = new VeoPlayer({ id: "veo4", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); </script> <script type="text/javascript"> let player5 = new VeoPlayer({ id: "veo5", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); </script> <script type="text/javascript"> let player6 = new VeoPlayer({ id: "veo6", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); </script> <script type="text/javascript"> let player7 = new VeoPlayer({ id: "veo7", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); </script> <script type="text/javascript"> let player8 = new VeoPlayer({ id: "veo8", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); </script> <script type="text/javascript"> let player9 = new VeoPlayer({ id: "veo9", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); </script> <script type="text/javascript"> let player10 = new VeoPlayer({ id: "veo10", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); </script> <script type="text/javascript"> let player11 = new VeoPlayer({ id: "veo11", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); </script> </body> </html> |
一样可以支持多种格式，效果还不错，不过支持的没有VLC的多。
相关文件看文章后面源码
2. kurento 播放rtsp
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="expires" content="0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="shortcut icon" href="./img/kurento.png" type="image/png" /> <script src="./js/jquery.min.js"></script> <script src="./js/kurento-client.min.js"></script> <script src="./js/kurento-utils.min.js"></script> <script src="./js/index.js"></script> <title>Kurento RTSP to WebRTC player</title> </head> <body> <div class="container"> <div class="page-header"> <h1>Kurento RTSP to WebRTC player</h1> </div> <div class="row"> <div class="col-md-5"> <h3>播放窗口</h3> <video id="videoOutput" autoplay width="480px" height="360px" style="border: 1px solid #857f7f;" poster="./img/webrtc.png"></video> </br> rtsp/http地址: <input style="width:350px;" id="address" type="text"> </br></br> </div> <div class="col-md-2"> <a id="start" href="#" class="btn btn-success"><span class="glyphicon glyphicon-play"></span> 播放</a><br /> <br /> <a id="stop" href="#" class="btn btn-danger"><span class="glyphicon glyphicon-stop"></span> 暂停</a> </div> </div> </div> </body> </html> |
这个是别人的代码，测试可用
3. video.js
这个没测试成功
相关源码：
链接: https://pan.baidu.com/s/19p9qroD-xx5SxX4avW2CEw?pwd=v4cq 提取码: v4cq
