使用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:文件流指针 返回值: …...
AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南
点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...
前端倒计时误差!
提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
cf2117E
原题链接：https://codeforces.com/contest/2117/problem/E 题目背景： 给定两个数组a,b，可以执行多次以下操作：选择 i (1 < i < n - 1)，并设置 或，也可以在执行上述操作前执行一次删除任意 和 。求…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
多种风格导航菜单 HTML 实现（附源码）
下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明：这是一个机器学习实战项目（附带数据代码文档），如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下，风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
人机融合智能 | “人智交互”跨学科新领域
本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...
关于easyexcel动态下拉选问题处理
前些日子突然碰到一个问题，说是客户的导入文件模版想支持部分导入内容的下拉选，于是我就找了easyexcel官网寻找解决方案，并没有找到合适的方案，没办法只能自己动手并分享出来，针对Java生成Excel下拉菜单时因选项过多导…...
深入浅出Diffusion模型：从原理到实践的全方位教程
I. 引言：生成式AI的黎明 – Diffusion模型是什么？ 近年来，生成式人工智能（Generative AI）领域取得了爆炸性的进展，模型能够根据简单的文本提示创作出逼真的图像、连贯的文本，乃至更多令人惊叹的…...