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

阿龍17872024-03-06 12:45

前言

因为项目测试需要，我需要可以快速知道自己推流的多路视频流质量，于是我想到可以使用html网页来播放视频，实现效果极其简单，方法有好几种，以下是几种记录：

注意：测试过，VLC需要使用360急速浏览器，于是以下都是基于360急速浏览器测试的：

一、Demo1：iframe

video_url_player.html代码:

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

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

html 复制代码 
<!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

这个没测试成功

4.其他：nodejs开启服务，实现网络播放rtsp

【前端】rtsp 与 rtmp 视频流的播放方法_Never Yu-华为云开发者联盟

相关源码：

html播放多路视频官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘

相关推荐
speop3 小时前
【笔记】I/O总结王道强化视频笔记
笔记·音视频
cuijiecheng20187 小时前
音视频入门基础：FLV专题（13）——FFmpeg源码中，解析任意Type值的SCRIPTDATAVALUE类型的实现
ffmpeg·音视频
Envyᥫᩣ8 小时前
《ASP.NET Web Forms 实现视频点赞功能的完整示例》
前端·asp.net·音视频·视频点赞
HJ_SDK15 小时前
探索私有化聊天软件：即时通讯与音视频技术的结合
音视频
jndingxin1 天前
OpenCV视频I/O(8）视频采集类VideoCapture之从视频源中读取一帧图像函数read()的使用
人工智能·opencv·音视频
SEU-WYL1 天前
基于深度学习的视频生成
人工智能·深度学习·音视频
小神.Chen1 天前
YouTube音视频合并批处理基于 FFmpeg的
ffmpeg·音视频
EasyCVR1 天前
安防监控/视频系统EasyCVR视频汇聚平台如何过滤134段的告警通道？
网络协议·音视频·视频编解码·视频监控·gb28181
Q8343158192 天前
华为 海思22AP10（SS524）H.265 编解码处理器用户指南
arm开发·人工智能·嵌入式硬件·音视频·硬件工程·h.265·视频编解码
PlumCarefree2 天前
mp4(H.265编码)转为本地RTSP流
音视频·harmonyos·h.265
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07springer 在线投稿编译踩坑08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CTF网络安全大赛简单的web抓包题目：HEADache