前言
因为项目测试需要，我需要可以快速知道自己推流的多路视频流质量，于是我想到可以使用html网页来播放视频，实现效果极其简单，方法有好几种，以下是几种记录：
注意：测试过，VLC需要使用360急速浏览器，于是以下都是基于360急速浏览器测试的：
一、Demo1：iframe
video_url_player.html代码:
1 2 3 4 | html,body,div{margin:1px;padding:0px;}td{padding:0px 1px 1px 0px;}table{border-collapse:collapse;border:0px solid #ff0000;text-align:center;} |
效果：
说明：
1. 支持几种常见的播放格式，无论是本地还是网络视频流都可以
2. 支持的格式不是特别多，一些特殊格式，无法播放
二、Demo2：VLC插件
需要安装VLC，然后就可以了，不过浏览器必须使用低版本的浏览器，测试一下很多浏览器不行，但是发现360急速浏览器就不需要所谓的低版本。
html代码：
1 2 |
效果：
说明：
可以自由排布，以及支持非常多的格式，只要安装好环境以后，就可以使用，只是浏览器比较麻烦，但是效果和质量是真的好。
三、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 | <title>videoplayer</title> /* 容器元素 */ .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; /* 文字居中 */ } document.addEventListener('click', () => { let player = new JSMpeg.Player("rtsp://127.0.0.1:8554/live",{ canvas: document.getElementById('jsmpeg-canvas'), // 要在用户点击过页面后，才可以播放声音 // audio: false, }) }, { once: true }) <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> let player0 = new VeoPlayer({ id: "veo0", autoplay: true, url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player1 = new VeoPlayer({ id: "veo1", autoplay: true, url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player2 = new VeoPlayer({ id: "veo2", autoplay: true, url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player3 = new VeoPlayer({ id: "veo3", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player4 = new VeoPlayer({ id: "veo4", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player5 = new VeoPlayer({ id: "veo5", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player6 = new VeoPlayer({ id: "veo6", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player7 = new VeoPlayer({ id: "veo7", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player8 = new VeoPlayer({ id: "veo8", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player9 = new VeoPlayer({ id: "veo9", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player10 = new VeoPlayer({ id: "veo10", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player11 = new VeoPlayer({ id: "veo11", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); |
一样可以支持多种格式，效果还不错，不过支持的没有VLC的多。
相关文件看文章后面源码
2. kurento 播放rtsp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <title>Kurento RTSP to WebRTC player</title><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 rgb(133, 127, 127); width: 1264px; height: 948px;" poster="./img/webrtc.png" data-origwidth="480" data-origheight="360"></video> rtsp/http地址: </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> |
这个是别人的代码，测试可用
3. video.js
这个没测试成功
相关源码：
链接: https://pan.baidu.com/s/19p9qroD-xx5SxX4avW2CEw?pwd=v4cq 提取码: v4cq
到此这篇关于html网页播放多个视频的几种方法的文章就介绍到这了,更多相关html播放多个视频内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章，希望大家以后多多支持IT俱乐部！
