html网页播放多个视频的几种方法

andy19850518 · 发表于 2024-4-20 08:07:46

前言

因为项目测试需要，我需要可以快速知道自己推流的多路视频流质量，于是我想到可以使用html网页来播放视频，实现效果极其简单，方法有好几种，以下是几种记录：
注意：测试过，VLC需要使用360急速浏览器，于是以下都是基于360急速浏览器测试的：
一、Demo1：iframe

video_url_player.html代码:

<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代码：

<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代码：

<!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

<!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
到此这篇关于html网页播放多个视频的几种方法的文章就介绍到这了,更多相关html播放多个视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

3582590268 · 发表于 2024-5-6 04:03:29

非常感谢你的观点，让我受益良多！

516784496 · 发表于 2024-6-5 13:06:00

看了LZ的帖子，我只想说一句很好很强大！

大西几 · 发表于 2024-7-1 10:33:04

同意你的观点，我们有共鸣。

小皮解说 · 发表于 2024-8-9 07:19:30

6666666666

qq1088 · 发表于 2024-9-1 11:12:54

同意你的观点，我们有共鸣。

熊猫玩电竞 · 发表于 2024-9-5 15:45:40

我不确定这个信息的准确性，请再确认一下

阳光一抹_ · 发表于 2024-9-26 23:26:37

说得太好了，完全同意！

我也只能苦笑了 · 发表于 2024-10-2 06:52:34

感谢分享，受益匪浅！

Nan · 发表于 2024-10-15 22:11:10

谢谢你分享这个信息

		自动登录	找回密码
密码			立即注册

html网页播放多个视频的几种方法

本帖子中包含更多资源

热心会员

付费会员