当前位置：首页 > news >正文

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

news 2025/9/23 23:09:33

前言

因为项目测试需要，我需要可以快速知道自己推流的多路视频流质量，于是我想到可以使用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网页播放多个视频的几种方法

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

编程日记 2024/3/5 15:56:21

python 基础知识点（蓝桥杯python科目个人复习计划58）

今日复习内容：做题例题1：仙境诅咒问题描述： 在一片神秘的仙境中，有N位修仙者，他们各自在仙境中独立修炼，拥有他们独特的修炼之地和修炼之道，修炼者们彼此之间相互尊重，和平相处…...

编程日记 2024/3/5 15:54:18

【基于React实现共享单车管理系统】—React基础知识巩固（二）

【基于React实现共享单车管理系统】—React基础知识巩固（二） 一、React介绍 Facebook开源的一个JavaScript库React结合生态构成的一个MV*库 React的特点 Declarative（声明式编码）Component-Based（组件化编码&#…...

编程日记 2024/3/5 15:52:15

云桥通+跨境电商：SDWAN企业组网优化跨境网络案例

跨境电商企业在全球范围内展开业务，需构建稳定高效的网络架构以支持其电商平台运营。云桥通SDWAN企业组网技术为跨境电商提供网络连接和管理的优化，提升网络性能、可靠性和安全性。以下是一家跨境电商企业的SDWAN组网案例，详细介绍其实施情况…...

编程日记 2024/3/5 15:51:14

服务器有几种http强制跳转https设置方法

目前为站点安装SSL证书开启https加密访问已经是件很简单的事了，主要是免费SSL证书的普及，为大家提供了很好的基础。 Apache环境下如何http强制跳转https访问。Nginx环境下一般是通过修改“你的域名.conf”文件来实现的。而Apache环境下通过修改.htacces…...

编程日记 2024/3/5 15:50:13

web坦克大战小游戏

H5小游戏源码、JS开发网页小游戏开源源码大合集。无需运行环境，解压后浏览器直接打开。有需要的订阅后，私信本人，发源码，含60+小游戏源码。如五子棋、象棋、植物大战僵尸、贪吃蛇、飞机大战、坦克大战、开心消消乐、扑鱼达人、扫雷、打地鼠、斗地主等等。 <!DOCTYPE htm…...

编程日记 2024/3/5 15:49:12

如何使用生成式人工智能探索视频博客的魅力？

视频博客，尤其是关于旅游的视频博客，为观众提供了一种全新的探索世界的方式。通过图像和声音的结合，观众可以身临其境地体验到旅行的乐趣和发现的喜悦。而对于内容创作者来说，旅游视频博客不仅能分享他们的旅行故事，还…...

编程日记 2024/3/5 15:48:11

gpt批量工具,gpt批量生成文章工具

GPT批量工具在今天的数字化时代扮演着越来越重要的角色，它们通过人工智能技术，可以自动批量生成各种类型的文章，为用户提供了便利和效率。本文将介绍5款不同的GPT批量工具，并介绍一款知名的147GPT生成工具，以及另外一款…...

编程日记 2024/3/5 15:46:09

Python知识汇总

重要链接： matplotlib库：matplotlib — Matplotlib 3.5.1 documentation DataFrame库：DataFrame — pandas 2.2.1 documentation (pydata.org) Python Matplotlib 实现散点图、曲线图、箱状图、柱状图示例：Python Matplotlib 实…...

编程日记 2024/3/5 15:45:08

WEB面试题

1.基础 Web 技术： 1.1 h5 行内元素和块级元素行内元素不会独占一行，高度和宽度由内容决定，不能单独设置宽高， 不能设置上下的margin和padding，只能设置左右的margin和padding； …...

编程日记 2024/3/5 15:43:06

Android Studio 六大基本布局详解

Android应用开发中，布局是至关重要的一部分，而Android Studio作为主流的开发工具，提供了多种布局方式来灵活适应不同的界面需求。在本文中，我们将深入探讨Android Studio中的六大基本布局，旨在帮助开发者更好地理解和运…...

编程日记 2024/3/5 15:42:04

如何应对IT服务交付中的问题？

如何应对IT服务交付中的问题？ 按需交付服务的挑战IT服务体系的复杂性恶性循环的形成学会洞察的重要性书籍简介参与方式按需交付服务的挑战一致性、可靠性、安全性、隐私性和成本效益的平衡：成功的按需交付服务需要满足这些要求，这需要服务…...

编程日记 2024/3/5 15:37:59

[Python] 缓存实用工具

cachetools 是一个 Python 库，提供了用于缓存的实用工具，包括各种缓存算法和数据结构，如 LRU（最近最少使用）缓存、TTL（时间到期）缓存等。使用 cachetools 可以轻松地在 Python 应用程序中实现缓…...

编程日记 2024/3/5 15:35:57

php反序列化字符逃逸

php反序列化和序列化 PHP序列化：serialize() 序列化是将变量或对象转换成字符串的过程，用于存储或传递 PHP 的值的过程中，同时不丢失其类型和结构。“序列化”是一种把对象的状态转化成字节流的机制类似于这样的结构： O:4:&quo…...

编程日记 2024/3/5 15:34:56

延迟加载（Lazy Initialization）的单例模式

延迟加载（Lazy Initialization）的单例模式是一种在对象第一次被请求时才创建单例实例的设计模式。这种方法可以减少程序启动时的负载和启动时间，特别是当单例对象的创建开销较大或者在启动时不一定需要该对象时。下面是实现延迟加载单例模式…...

编程日记 2024/3/5 15:28:48

C++三级专项流感传染

时间限制：1000 内存限制：65536 有一批易感人群住在网格状的宿舍区内，宿舍区为n*n的矩阵，每个格点为一个房间，房间里可能住人，也可能空着。在第一天，有些房间里的人得了流感，以后每…...

编程日记 2024/3/5 15:27:47

如何用Elementor创建WordPress会员网站

在下面的文章中，我们将向您展示如何使用Elementor和MemberPress在WordPress中轻松构建会员网站。这篇文章将涵盖WordPress会员网站设置过程、会员资格和受保护内容创建、重要页面和登录表单设计、电子邮件通知管理、报告等。目录什么是WordPress会员网站&#x…...

编程日记 2024/3/5 15:26:46

【脑切片图像分割】MATLAB 图像处理源码

1. 简单图像处理加载图像 Brain.jpg，使用直方图和颜色分割成区域这些区域有不同的颜色。这是一个更高级的问题，有多个解决它的方法。例如，您可以计算具有特定数字的图像的直方图（例如 16 - 32），找到直方…...

编程日记 2024/3/5 15:21:40

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…...

编程日记 2024/3/5 15:17:36