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

您所在的位置：网站首页 › 苹果怎么切换页面顺序播放视频 › 使用html网页播放多个视频的几种方法

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

2024-07-10 16:25| 来源: 网络整理| 查看: 265

前言

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

注意：测试过，VLC需要使用360急速浏览器，于是以下都是基于360急速浏览器测试的：

一、Demo1：iframe

video_url_player.html代码:

html,body,div{margin:1px;padding:0px;} td{padding:0px 1px 1px 0px;} table{border-collapse:collapse;border:0px solid #ff0000;text-align:center;}

效果：

说明：

1. 支持几种常见的播放格式，无论是本地还是网络视频流都可以

2. 支持的格式不是特别多，一些特殊格式，无法播放

二、Demo2：VLC插件

需要安装VLC，然后就可以了，不过浏览器必须使用低版本的浏览器，测试一下很多浏览器不行，但是发现360急速浏览器就不需要所谓的低版本。

html代码：

效果：

说明：

可以自由排布，以及支持非常多的格式，只要安装好环境以后，就可以使用，只是浏览器比较麻烦，但是效果和质量是真的好。

三、Demo3：使用一些常见的js

优势：嵌入简单，而且自动使用OpenGL渲染，有些支持硬件加速。

1. veoplayer

html代码：

videoplayer /* 容器元素 */ .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; /* 文字居中 */ } document.addEventListener('click', () => { let player = new JSMpeg.Player("rtsp://127.0.0.1:8554/live",{ canvas: document.getElementById('jsmpeg-canvas'), // 要在用户点击过页面后，才可以播放声音 // audio: false, }) }, { once: true }) let player0 = new VeoPlayer({ id: "veo0", autoplay: true, url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player1 = new VeoPlayer({ id: "veo1", autoplay: true, url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player2 = new VeoPlayer({ id: "veo2", autoplay: true, url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player3 = new VeoPlayer({ id: "veo3", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player4 = new VeoPlayer({ id: "veo4", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player5 = new VeoPlayer({ id: "veo5", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player6 = new VeoPlayer({ id: "veo6", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player7 = new VeoPlayer({ id: "veo7", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player8 = new VeoPlayer({ id: "veo8", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player9 = new VeoPlayer({ id: "veo9", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player10 = new VeoPlayer({ id: "veo10", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, }); let player11 = new VeoPlayer({ id: "veo11", url: "./test.mp4", height: 660, width: 445, style: { themeColor: "#91CB40", processColor: "#91CB40", animation: true, processHeight: 8, }, });

一样可以支持多种格式，效果还不错，不过支持的没有VLC的多。

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

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

今日新闻

推荐新闻