使用html网页播放多个视频的几种方法
前言
因为项目测试需要，我需要可以快速知道自己推流的多路视频流质量，于是我想到可以使用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"><spanclass="glyphicon glyphicon-play"></span> 播放</a><br /> <br /> <aid="stop" href="#" class="btn btn-danger"><spanclass="glyphicon glyphicon-stop"></span> 暂停</a></div></div></div>
</body>
</html>
这个是别人的代码，测试可用
3. video.js
这个没测试成功
4.其他：nodejs开启服务，实现网络播放rtsp
【前端】rtsp 与 rtmp 视频流的播放方法_Never Yu-华为云开发者联盟
相关源码：
html播放多路视频官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘
相关文章：
使用html网页播放多个视频的几种方法
前言 因为项目测试需要，我需要可以快速知道自己推流的多路视频流质量，于是我想到可以使用html网页来播放视频，实现效果极其简单，方法有好几种，以下是几种记录： 注意：测试过，VLC需要使…...
python 基础知识点（蓝桥杯python科目个人复习计划58）
今日复习内容：做题 例题1：仙境诅咒 问题描述： 在一片神秘的仙境中，有N位修仙者，他们各自在仙境中独立修炼，拥有他们独特的修炼之地和修炼之道，修炼者们彼此之间相互尊重，和平相处…...
【基于React实现共享单车管理系统】—React基础知识巩固（二）
【基于React实现共享单车管理系统】—React基础知识巩固（二） 一、React介绍 Facebook开源的一个JavaScript库React结合生态构成的一个MV*库 React的特点 Declarative（声明式编码）Component-Based（组件化编码&#…...
云桥通+跨境电商：SDWAN企业组网优化跨境网络案例
跨境电商企业在全球范围内展开业务，需构建稳定高效的网络架构以支持其电商平台运营。云桥通SDWAN企业组网技术为跨境电商提供网络连接和管理的优化，提升网络性能、可靠性和安全性。以下是一家跨境电商企业的SDWAN组网案例，详细介绍其实施情况…...
服务器有几种http强制跳转https设置方法
目前为站点安装SSL证书开启https加密访问已经是件很简单的事了，主要是免费SSL证书的普及，为大家提供了很好的基础。 Apache环境下如何http强制跳转https访问。Nginx环境下一般是通过修改“你的域名.conf”文件来实现的。 而Apache环境下通过修改.htacces…...
web坦克大战小游戏
H5小游戏源码、JS开发网页小游戏开源源码大合集。无需运行环境，解压后浏览器直接打开。有需要的订阅后，私信本人，发源码，含60+小游戏源码。如五子棋、象棋、植物大战僵尸、贪吃蛇、飞机大战、坦克大战、开心消消乐、扑鱼达人、扫雷、打地鼠、斗地主等等。 <!DOCTYPE htm…...
如何使用生成式人工智能探索视频博客的魅力？
视频博客，尤其是关于旅游的视频博客，为观众提供了一种全新的探索世界的方式。通过图像和声音的结合，观众可以身临其境地体验到旅行的乐趣和发现的喜悦。而对于内容创作者来说，旅游视频博客不仅能分享他们的旅行故事，还…...
gpt批量工具,gpt批量生成文章工具
GPT批量工具在今天的数字化时代扮演着越来越重要的角色，它们通过人工智能技术，可以自动批量生成各种类型的文章，为用户提供了便利和效率。本文将介绍5款不同的GPT批量工具，并介绍一款知名的147GPT生成工具，以及另外一款…...
Python知识汇总
重要链接： matplotlib库：matplotlib — Matplotlib 3.5.1 documentation DataFrame库：DataFrame — pandas 2.2.1 documentation (pydata.org) Python Matplotlib 实现散点图、曲线图、箱状图、柱状图示例：Python Matplotlib 实…...
WEB面试题
1.基础 Web 技术： 1.1 h5 行内元素和块级元素 行内元素不会独占一行，高度和宽度由内容决定，不能单独设置宽高， 不能设置上下的margin和padding，只能设置左右的margin和padding； …...
Android Studio 六大基本布局详解
Android应用开发中，布局是至关重要的一部分，而Android Studio作为主流的开发工具，提供了多种布局方式来灵活适应不同的界面需求。在本文中，我们将深入探讨Android Studio中的六大基本布局，旨在帮助开发者更好地理解和运…...
如何应对IT服务交付中的问题？
如何应对IT服务交付中的问题？ 按需交付服务的挑战IT服务体系的复杂性恶性循环的形成学会洞察的重要性书籍简介参与方式 按需交付服务的挑战 一致性、可靠性、安全性、隐私性和成本效益的平衡：成功的按需交付服务需要满足这些要求，这需要服务…...
[Python] 缓存实用工具
cachetools 是一个 Python 库，提供了用于缓存的实用工具，包括各种缓存算法和数据结构，如 LRU（最近最少使用）缓存、TTL（时间到期）缓存等。使用 cachetools 可以轻松地在 Python 应用程序中实现缓…...
php反序列化字符逃逸
php反序列化和序列化 PHP序列化：serialize() 序列化是将变量或对象转换成字符串的过程，用于存储或传递 PHP 的值的过程中，同时不丢失其类型和结构。“序列化”是一种把对象的状态转化成字节流的机制 类似于这样的结构： O:4:&quo…...
延迟加载（Lazy Initialization）的单例模式
延迟加载（Lazy Initialization）的单例模式是一种在对象第一次被请求时才创建单例实例的设计模式。这种方法可以减少程序启动时的负载和启动时间，特别是当单例对象的创建开销较大或者在启动时不一定需要该对象时。 下面是实现延迟加载单例模式…...
C++三级专项 流感传染
时间限制：1000 内存限制：65536 有一批易感人群住在网格状的宿舍区内，宿舍区为n*n的矩阵，每个格点为一个房间，房间里可能住人，也可能空着。在第一天，有些房间里的人得了流感，以后每…...
如何用Elementor创建WordPress会员网站
在下面的文章中，我们将向您展示如何使用Elementor和MemberPress在WordPress中轻松构建会员网站。这篇文章将涵盖WordPress会员网站设置过程、会员资格和受保护内容创建、重要页面和登录表单设计、电子邮件通知管理、报告等。 目录 什么是WordPress会员网站&#x…...
【脑切片图像分割】MATLAB 图像处理 源码
1. 简单图像处理 加载图像 Brain.jpg，使用直方图和颜色分割成区域这些区域有不同的颜色。 这是一个更高级的问题，有多个解决它的方法。 例如，您可以计算具有特定数字的图像的直方图（例如 16 - 32），找到直方…...
深度学习系列61：在CPU上运行大模型
1. 快速版 1.1 llamafile https://github.com/Mozilla-Ocho/llamafile 直接下载就可以用，链接为：https://huggingface.co/jartine/llava-v1.5-7B-GGUF/resolve/main/llava-v1.5-7b-q4.llamafile?downloadtrue 启动：./llava-v1.5-7b-q4.lla…...
IO接口 2月5日学习笔记
1.fgetc 用于从文件中读取一个字符，fgetc 函数每次调用将会返回当前文件指针所指向的字符，并将文件指针指向下一个字符。 int fgetc(FILE *stream); 功能: 从流中读取下一个字符 参数: stream:文件流指针 返回值: …...
OpenLayers 可视化之热力图
注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 热力图（Heatmap）又叫热点图，是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...
数据链路层的主要功能是什么
数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装 封装： 将网络层下发…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...
（转）什么是DockerCompose?它有什么作用？
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用，而无需手动一个个创建和运行容器。 Compose文件是一个文本文件，通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
浅谈不同二分算法的查找情况
二分算法原理比较简单，但是实际的算法模板却有很多，这一切都源于二分查找问题中的复杂情况和二分算法的边界处理，以下是博主对一些二分算法查找的情况分析。 需要说明的是，以下二分算法都是基于有序序列为升序有序的情况…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值，用于设置元素的宽度根据其内容自动调整，确保宽度刚好容纳内容而不会超出。 效果对比 默认情况（width: auto）： 块级元素（如 <div>）会占满父容器…...
【VLNs篇】07：NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战，克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
MFC 抛体运动模拟：常见问题解决与界面美化
在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...