欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

html網(wǎng)頁(yè)播放多個(gè)視頻的幾種方法

  發(fā)布時(shí)間：2024-03-04 15:56:44   作者： 阿龍1787   我要評(píng)論
本文主要介紹了html網(wǎng)頁(yè)播放多個(gè)視頻的幾種方法，包含iframe標(biāo)簽，VLC插件和一些常見的js插件，具有一定的參考價(jià)值，感興趣的可以了解一下

前言

因?yàn)轫?xiàng)目測(cè)試需要，我需要可以快速知道自己推流的多路視頻流質(zhì)量，于是我想到可以使用html網(wǎng)頁(yè)來(lái)播放視頻，實(shí)現(xiàn)效果極其簡(jiǎn)單，方法有好幾種，以下是幾種記錄：

注意：測(cè)試過(guò)，VLC需要使用360急速瀏覽器，于是以下都是基于360急速瀏覽器測(cè)試的：

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

效果：

說(shuō)明：

1. 支持幾種常見的播放格式，無(wú)論是本地還是網(wǎng)絡(luò)視頻流都可以

2. 支持的格式不是特別多，一些特殊格式，無(wú)法播放

二、Demo2：VLC插件

需要安裝VLC，然后就可以了，不過(guò)瀏覽器必須使用低版本的瀏覽器，測(cè)試一下很多瀏覽器不行，但是發(fā)現(xiàn)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>

效果：

說(shuō)明：

可以自由排布，以及支持非常多的格式，只要安裝好環(huán)境以后，就可以使用，只是瀏覽器比較麻煩，但是效果和質(zhì)量是真的好。

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

優(yōu)勢(shì)：嵌入簡(jiǎn)單，而且自動(dòng)使用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); /* 列數(shù)為3，每列平均分配剩余空間 */
        grid-template-rows: repeat(4, 1fr); /* 行數(shù)為4，每行平均分配剩余空間 */
        grid-gap: 10px; /* 單元格之間的間距 */
      }
      /* 單元格元素 */
      .cell {
        background-color: #ccc; /* 背景顏色 */
        padding: 20px; /* 內(nèi)邊距 */
        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'),
			// 要在用戶點(diǎn)擊過(guò)頁(yè)面后，才可以播放聲音
			// 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>

一樣可以支持多種格式，效果還不錯(cuò)，不過(guò)支持的沒有VLC的多。

相關(guān)文件看文章后面源碼

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>

這個(gè)是別人的代碼，測(cè)試可用

3. video.js 

這個(gè)沒測(cè)試成功

相關(guān)源碼：

鏈接: https://pan.baidu.com/s/19p9qroD-xx5SxX4avW2CEw?pwd=v4cq 提取碼: v4cq 

到此這篇關(guān)于html網(wǎng)頁(yè)播放多個(gè)視頻的幾種方法的文章就介紹到這了,更多相關(guān)html播放多個(gè)視頻內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • Html5 video 標(biāo)簽 src 用數(shù)據(jù)流方式播放視頻

    HTML5中的video標(biāo)簽用于播放視頻文件的，本文介紹了Html5 video 標(biāo)簽 src 用數(shù)據(jù)流方式播放視頻，具有一定的參考價(jià)值，感興趣的可以了解一下
    2023-09-27

  • HTML中實(shí)現(xiàn)音樂或視頻自動(dòng)播放案例詳解

    由于期末大作業(yè)我想插入一個(gè)背景音樂，實(shí)現(xiàn)點(diǎn)開網(wǎng)頁(yè)就會(huì)自動(dòng)播放音頻的效果，今天通過(guò)本文給大家分享下我基于HTML實(shí)現(xiàn)音樂或視頻自動(dòng)播放功能，代碼簡(jiǎn)單易懂，需要的朋友參
    2022-05-27

  • HTML5 video循環(huán)播放多個(gè)視頻的方法步驟

    這篇文章主要介紹了HTML5 video循環(huán)播放多個(gè)視頻的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)
    2020-08-06

  • html5中嵌入視頻自動(dòng)播放的問(wèn)題解決

    這篇文章主要介紹了html5中嵌入視頻自動(dòng)播放的問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起
    2020-05-25

  • html5自動(dòng)播放mov格式視頻的實(shí)例代碼

    這篇文章主要介紹了html5自動(dòng)播放mov格式視頻的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-01-14

  • HTML5自定義視頻播放器源碼

    這篇文章主要介紹了HTML5自定義視頻播放器源碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-01-06

  • HTML5 播放 RTSP 視頻的實(shí)例代碼

    目前大多數(shù)網(wǎng)絡(luò)攝像頭都是通過(guò) RTSP 協(xié)議傳輸視頻流的，但是 HTML 并不標(biāo)準(zhǔn)支持 RTSP 流。本文重點(diǎn)給大家介紹HTML5 播放 RTSP 視頻的實(shí)例代碼，需要的朋友參考下吧
    2019-07-29

  • HTML5 視頻播放(video),JavaScript控制視頻的實(shí)例代碼

    這篇文章主要介紹了HTML5 視頻播放(video),JavaScript控制視頻的實(shí)例代碼，需要的朋友參考下吧
    2018-10-08

  • HTML5視頻播放插件 video.js介紹

    這篇文章主要介紹了HTML5視頻播放插件 video.js介紹 ,需要的朋友可以參考下
    2018-09-29

  • html5 視頻播放解決方案

    這里主要研究的是通過(guò)應(yīng)用html5來(lái)解決視頻播放的問(wèn)題。Adobe公司因?yàn)閼?zhàn)略錯(cuò)誤，忽視了移動(dòng)互聯(lián)這塊，移動(dòng)終端對(duì)flash支持并不好，特別是蘋果終端都不支持flash（蘋果電腦和
    2016-11-06

最新評(píng)論