使用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:文件流指针 返回值: …...
智能自动化OpenCore配置工具：OpCore-Simplify让黑苹果新手也能15分钟完成专业级EFI构建
智能自动化OpenCore配置工具：OpCore-Simplify让黑苹果新手也能15分钟完成专业级EFI构建 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 当…...
9个非技术岗也能胜任的AI岗位，小白程序员看过来，建议收藏！[特殊字符]
9个非技术岗也能胜任的AI岗位，小白程序员看过来，建议收藏！🔥 本文介绍了9个适合非技术背景人士的AI相关岗位，包括AI产品运营、大模型产品助理、AI客服训练师等，涵盖了岗位职责、薪资水平、招聘方及入门建议…...
在PHP中，何时使用静态工厂方法替代构造函数？
在 PHP 中，构造函数 (__construct) 是实例化对象的默认方式，但它有几个明显的局限性： 名称固定：只能叫 __construct，无法表达意图。返回类型固定：只能返回当前类的实例，不能返回子类或缓存对象。…...
告别网络依赖：用Vue3+Leaflet和IIS搭建本地离线地图服务（附腾讯地图瓦片下载）
构建企业级离线地图解决方案：Vue3Leaflet与IIS深度整合指南 在数字化转型浪潮中，地图功能已成为各类管理系统的基础需求。然而，许多政企单位、军工机构及偏远地区项目往往面临网络不稳定或完全离线的特殊环境。本文将系统介绍如何基于Vue3、L…...
《AI应用实战课》第八课：大语言模型与垂直行业问答系统——从通识智能到产业落地的最后一公里
引言：站在巨变的时代路口 欢迎来到《AI 应用实战课》的最终章。如果说前七节课我们是在构建AI的“大脑”与“感官”——从数据的感知、特征的提取，到逻辑的推理、模式的识别——那么这第八节课，我们将为这个大脑注入最核心的“灵魂”…...
PyPika数据分析利器：如何使用聚合函数和分组查询
PyPika数据分析利器：如何使用聚合函数和分组查询 【免费下载链接】pypika PyPika is a python SQL query builder that exposes the full richness of the SQL language using a syntax that reflects the resulting query. PyPika excels at all sorts of SQL quer…...
sing-box性能调优：从内存占用到吞吐量的全面优化
sing-box性能调优：从内存占用到吞吐量的全面优化 引言 sing-box作为通用代理平台（The universal proxy platform），在高并发网络环境下的性能表现直接影响用户体验。本文将从内存管理、连接复用、吞吐量优化三个维度，…...
AI时代下的AOSP构建：从“效率黑洞”到“分钟级交付”，企业级构建如何破局？
近年来，AI模型训练与大型软件构建的复杂度持续攀升，企业级操作系统的多分支、多产品构建正成为工程团队的“效率黑洞”。在 Android 平台，AOSP 构建尤为突出：全量构建耗时长、增量改动触发大规模重建、CI 队列冗长、资源消耗高等问…...
5分钟快速上手：用LeaguePrank打造你的专属英雄联盟游戏形象
5分钟快速上手：用LeaguePrank打造你的专属英雄联盟游戏形象 【免费下载链接】LeaguePrank 项目地址: https://gitcode.com/gh_mirrors/le/LeaguePrank LeaguePrank是一款基于官方LCU API开发的开源工具，让你能够安全、合规地修改英雄联盟游戏界面…...
春联生成模型-中文-base环境隔离部署：Anaconda虚拟环境配置指南
春联生成模型-中文-base环境隔离部署：Anaconda虚拟环境配置指南 每次想尝试一个新的AI模型，最头疼的可能不是模型本身，而是环境配置。装了这个包，发现和之前项目的包版本冲突；好不容易跑起来，结果报了一堆…...