使用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:文件流指针 返回值: …...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成：MAC头部frame bodyFCS，其中MAC是固定格式的，frame body是可变长度。 MAC头部有frame control，duration，address1，address2，addre…...
Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢，博主的学习进度也是步入了Java Mybatis 框架，目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学，希望能对大家有所帮助，也特别欢迎大家指点不足之处，小生很乐意接受正确的建议&…...
可靠性+灵活性：电力载波技术在楼宇自控中的核心价值
可靠性灵活性：电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...
【机器视觉】单目测距——运动结构恢复
ps：图是随便找的，为了凑个封面 前言 在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛…...
抖音增长新引擎：品融电商，一站式全案代运营领跑者
抖音增长新引擎：品融电商，一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中，品牌如何破浪前行？自建团队成本高、效果难控；碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一，概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本：2014.07； Kernel版本：Linux-3.10； 二，Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)，并让boo…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...
MySQL 知识小结（一）
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库，分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷，但是文件存放起来数据比较冗余，用二进制能够更好管理咱们M…...
02.运算符
目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&：逻辑与 ||：逻辑或 ！：逻辑非 短路求值 位运算符 按位与&： 按位或 | 按位取反~ …...
Java并发编程实战 Day 11：并发设计模式
【Java并发编程实战 Day 11】并发设计模式 开篇 这是"Java并发编程实战"系列的第11天，今天我们聚焦于并发设计模式。并发设计模式是解决多线程环境下常见问题的经典解决方案，它们不仅提供了优雅的设计思路，还能显著提升系统的性能…...