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

这篇具有很好参考价值的文章主要介绍了使用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>

效果:

veoplayer,阿龍1787的gstreamer学习笔记,杂七杂八,音视频

说明:

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>

效果:

veoplayer,阿龍1787的gstreamer学习笔记,杂七杂八,音视频

说明:

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

三、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>

veoplayer,阿龍1787的gstreamer学习笔记,杂七杂八,音视频

一样可以支持多种格式,效果还不错,不过支持的没有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"><span
					class="glyphicon glyphicon-play"></span> 播放</a><br /> <br /> <a
					id="stop" href="#" class="btn btn-danger"><span
					class="glyphicon glyphicon-stop"></span> 暂停</a>
			</div>
		</div>

		
	</div>
</body>
</html>

veoplayer,阿龍1787的gstreamer学习笔记,杂七杂八,音视频

这个是别人的代码,测试可用

3. video.js 

这个没测试成功

4.其他:nodejs开启服务,实现网络播放rtsp

【前端】rtsp 与 rtmp 视频流的播放方法_Never Yu-华为云开发者联盟

相关源码:

html播放多路视频官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘文章来源地址https://www.toymoban.com/news/detail-860871.html

到了这里,关于使用html网页播放多个视频的几种方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue 项目中使用video实现视频播放效果暂停播放(多个视频)

    根据ref判断是否暂停状态返回 true false vue 控制video视频的播放暂停(多个视频) 安装video.js 在main.js中引用 页面

    2024年02月11日
    浏览(50)
  • 使用ffmpeg缩小视频体积的几种方式

      随着视频制作的普及,视频文件的体积也越来越大,给存储和传输带来了很大的困扰。为了解决这个问题,我们可以使用FFmpeg这个强大的工具来缩小视频的体积。本文将介绍三种常用的方法:调整视频的分辨率、调整视频的码率和使用更高效的视频编码格式。   调整视

    2024年02月06日
    浏览(35)
  • Python安装库的几种方法(使用Pycharm几种方法)

    1.我的Pycharm已经改成中文格式了 首先在Pycharm中进行安装库 进入Python解释器中。 里面搜素需要的库,可能速度很慢,有的库没有,可以采用别的方法。 2. cmd安装库文件 Windows+R进入CMD命令下。 直接输入 pip install *** 就可以了 就是自动安装需要的库。 3.直接使用别人已经安装好

    2024年02月13日
    浏览(45)
  • 网页使用JavaScript实现用户点击播放后再加载视频

    由于视频通常体积较大,消耗流量开销较多,所以要实现点击播放后再加载视频资源以减少流量消耗,以下是代码示例

    2024年02月01日
    浏览(38)
  • Vue中使用icon的几种方法

    目录 1. 使用第三方 UI 库 2. 使用矢量图标库 3. 自定义 icon 组件 4. 使用 CDN 5. 使用 CSS 图标库 在Vue中使用icon可以有多种方法,以下是其中的一些: 使用第三方 UI 库,如 ElementUI、Vuetify等,它们提供了一系列的组件和 icons 组件。 使用矢量图标库,如 Font Awesome、Material Design Ic

    2024年02月10日
    浏览(40)
  • Python 打开网页的几种方式

    方法1:直接调用系统命令 os 方法2:引用webrowser包 方法3:引用selenium工具,解决闪退问题 附:Pycharm 安装selenium 工具说明

    2024年02月16日
    浏览(45)
  • Qt 播放音频文件的几种方式

    : Qt 、 QSound 、 QSoundEffect 、 QMediaPlayer 、 multimedia 这篇文章至少拖了有一两个月了,这不阳了,在家实在是难受的要死,无心处理工作的事情,那就写写博客吧,因为项目中需要用到播放音频的功能,CV了部分代码,这里就简单的扯扯我对 QSound 、 QSoundEffect 和 QMediaP

    2024年02月11日
    浏览(42)
  • Linux 查看内存使用情况的几种方法

    *以下内容为本人的学习笔记,如需要转载,请声明原文链接 微信公众号「ENG八戒」https://mp.weixin.qq.com/s/27UaVm5_FMhCnxB88pc0QA 在运行 Linux 系统的过程中为了让电脑或者服务器以最佳水平运行,常常需要监控内存统计信息。 那么今天我们就来看看有哪些方法可以访问所有相关信息

    2023年04月20日
    浏览(41)
  • Android 实现GIF播放的几种方式

    Glide 是Android上比较常见的图片加载框架,其介绍可以看Android Glide简单使用。 布局文件,GIF文件可以在 ImageView 里面显示 调用 load() 方法,导入图片并用 ImageView 显示 当然这样的方式只能循环播放,如果想要指定循环次数,需要调用 GifDrawable 的 setLoopCount() 方法。 android-gif-d

    2024年02月02日
    浏览(35)
  • 分享Linux 查看内存使用情况的几种方法

    Linux 查看内存使用情况的几种方法包括使用 free 命令、top 命令、htop 命令、vmstat 命令和/proc/meminfo 文件。这些方法可以帮助用户了解系统内存的使用情况,包括总内存、已用内存、空闲内存、缓存和交换分区等信息。 在运行 Linux 系统的过程中为了让电脑或者服务器以最

    2024年02月04日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包