• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

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

    发布者: Error | 发布时间: 2025-6-16 12:15| 查看数: 42| 评论数: 0|帖子模式

    前言

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

    video_url_player.html代码:
    1. <html>
    2. <head>
    3.   <style>
    4.     html,body,div{margin:1px;padding:0px;}
    5.     td{padding:0px 1px 1px 0px;}
    6.     table{border-collapse:collapse;border:0px solid #ff0000;text-align:center;}
    7.   </style>
    8. </head>
    9. <body>
    10. <table width=100% height=100%>
    11.   <tr>
    12.     <td><iframe frameborder=0 src=http://vfx.mtime.cn/Video/2021/11/16/mp4/211116131456748178.mp4 width=100% height=100%></iframe></td>
    13.     <td><iframe frameborder=0 src=http://vfx.mtime.cn/Video/2021/11/16/mp4/211116131456748178.mp4 width=100% height=100%></iframe></td>
    14.     <td><iframe frameborder=0 src=http://vfx.mtime.cn/Video/2021/11/16/mp4/211116131456748178.mp4 width=100% height=100%></iframe></td>
    15.   </tr>
    16.   <tr>
    17.     <td><iframe frameborder=0 src=http://vfx.mtime.cn/Video/2021/11/16/mp4/211116131456748178.mp4 width=100% height=100%></iframe></td>
    18.     <td><iframe frameborder=0 src=http://vfx.mtime.cn/Video/2021/11/16/mp4/211116131456748178.mp4 width=100% height=100%></iframe></td>
    19.   </tr>
    20. </table>
    21. </body>
    22. </html>
    复制代码
    效果：

    说明：
    1. 支持几种常见的播放格式，无论是本地还是网络视频流都可以
    2. 支持的格式不是特别多，一些特殊格式，无法播放
    二、Demo2：VLC插件

    需要安装VLC，然后就可以了，不过浏览器必须使用低版本的浏览器，测试一下很多浏览器不行，但是发现360急速浏览器就不需要所谓的低版本。
    html代码：
    1. <html>
    2. <head>
    3. </head>
    4. <body>
    5.         <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
    6.                 version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc"
    7.                 target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4">
    8.         </embed>
    9.                 <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
    10.                 version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc"
    11.                 target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4">
    12.         </embed>
    13.                 <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
    14.                 version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc"
    15.                 target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4">
    16.         </embed>
    17.                 <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
    18.                 version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc"
    19.                 target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4">
    20.         </embed>
    21.                 <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
    22.                 version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc"
    23.                 target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4">
    24.         </embed>
    25.                 <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
    26.                 version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc"
    27.                 target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4">
    28.         </embed>
    29.                 <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
    30.                 version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc"
    31.                 target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4">
    32.         </embed>
    33.                 <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
    34.                 version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc"
    35.                 target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4">
    36.         </embed>
    37.                 <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
    38.                 version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc"
    39.                 target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4">
    40.         </embed>
    41.                 <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
    42.                 version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc"
    43.                 target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4">
    44.         </embed>
    45.                 <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
    46.                 version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc"
    47.                 target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4">
    48.         </embed>
    49.                 <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
    50.                 version="VideoLAN.VLCPlugin.2" width="320" height="240" id="vlc"
    51.                 target="file:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4">
    52.         </embed>
    53. </body>
    54. </html>
    复制代码
    效果：

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

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

    html代码：
    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8" />
    5.     <title>videoplayer</title>
    6.     <script src="./veoplayer.global.min.js"></script>
    7.         <style>
    8.       /* 容器元素 */
    9.       .container {
    10.         display: grid;
    11.         grid-template-columns: repeat(3, 1fr); /* 列数为3，每列平均分配剩余空间 */
    12.         grid-template-rows: repeat(4, 1fr); /* 行数为4，每行平均分配剩余空间 */
    13.         grid-gap: 10px; /* 单元格之间的间距 */
    14.       }
    15.       /* 单元格元素 */
    16.       .cell {
    17.         background-color: #ccc; /* 背景颜色 */
    18.         padding: 20px; /* 内边距 */
    19.         text-align: center; /* 文字居中 */
    20.       }
    21.     </style>
    22.   </head>
    23.   <body>
    24.     <canvas id="video-canvas"></canvas>
    25.         <script type="text/javascript">
    26.       document.addEventListener('click', () => {
    27.                 let player = new JSMpeg.Player("rtsp://127.0.0.1:8554/live",{
    28.                         canvas: document.getElementById('jsmpeg-canvas'),
    29.                         // 要在用户点击过页面后，才可以播放声音
    30.                         // audio: false,
    31.                 })
    32.           }, { once: true })
    33.     </script>
    34.   <div class="container">
    35.     <div class="cell" id="veo0"></div>
    36.         <div class="cell" id="veo1"></div>
    37.         <div class="cell" id="veo2"></div>
    38.         <div class="cell" id="veo3"></div>
    39.         <div class="cell" id="veo4"></div>
    40.         <div class="cell" id="veo5"></div>
    41.         <div class="cell" id="veo6"></div>
    42.         <div class="cell" id="veo7"></div>
    43.         <div class="cell" id="veo8"></div>
    44.         <div class="cell" id="veo9"></div>
    45.         <div class="cell" id="veo10"></div>
    46.         <div class="cell" id="veo11"></div>
    47.   </div>
    48.     <script type="text/javascript">
    49.       let player0 = new VeoPlayer({
    50.         id: "veo0",
    51.                 autoplay: true,
    52.         url: "./test.mp4",
    53.         height: 660,
    54.         width: 445,
    55.         style: {
    56.           themeColor: "#91CB40",
    57.           processColor: "#91CB40",
    58.           animation: true,
    59.           processHeight: 8,
    60.         },
    61.       });
    62.     </script>
    63.             <script type="text/javascript">
    64.       let player1 = new VeoPlayer({
    65.         id: "veo1",
    66.         autoplay: true,
    67.         url: "./test.mp4",
    68.         height: 660,
    69.         width: 445,
    70.         style: {
    71.           themeColor: "#91CB40",
    72.           processColor: "#91CB40",
    73.           animation: true,
    74.           processHeight: 8,
    75.         },
    76.       });
    77.     </script>
    78.             <script type="text/javascript">
    79.       let player2 = new VeoPlayer({
    80.         id: "veo2",
    81.         autoplay: true,
    82.         url: "./test.mp4",
    83.         height: 660,
    84.         width: 445,
    85.         style: {
    86.           themeColor: "#91CB40",
    87.           processColor: "#91CB40",
    88.           animation: true,
    89.           processHeight: 8,
    90.         },
    91.       });
    92.     </script>
    93.             <script type="text/javascript">
    94.       let player3 = new VeoPlayer({
    95.         id: "veo3",
    96.         url: "./test.mp4",
    97.         height: 660,
    98.         width: 445,
    99.         style: {
    100.           themeColor: "#91CB40",
    101.           processColor: "#91CB40",
    102.           animation: true,
    103.           processHeight: 8,
    104.         },
    105.       });
    106.     </script>
    107.             <script type="text/javascript">
    108.       let player4 = new VeoPlayer({
    109.         id: "veo4",
    110.         url: "./test.mp4",
    111.         height: 660,
    112.         width: 445,
    113.         style: {
    114.           themeColor: "#91CB40",
    115.           processColor: "#91CB40",
    116.           animation: true,
    117.           processHeight: 8,
    118.         },
    119.       });
    120.     </script>
    121.             <script type="text/javascript">
    122.       let player5 = new VeoPlayer({
    123.         id: "veo5",
    124.         url: "./test.mp4",
    125.         height: 660,
    126.         width: 445,
    127.         style: {
    128.           themeColor: "#91CB40",
    129.           processColor: "#91CB40",
    130.           animation: true,
    131.           processHeight: 8,
    132.         },
    133.       });
    134.     </script>
    135.         <script type="text/javascript">
    136.       let player6 = new VeoPlayer({
    137.         id: "veo6",
    138.         url: "./test.mp4",
    139.         height: 660,
    140.         width: 445,
    141.         style: {
    142.           themeColor: "#91CB40",
    143.           processColor: "#91CB40",
    144.           animation: true,
    145.           processHeight: 8,
    146.         },
    147.       });
    148.     </script>
    149.         <script type="text/javascript">
    150.       let player7 = new VeoPlayer({
    151.         id: "veo7",
    152.         url: "./test.mp4",
    153.         height: 660,
    154.         width: 445,
    155.         style: {
    156.           themeColor: "#91CB40",
    157.           processColor: "#91CB40",
    158.           animation: true,
    159.           processHeight: 8,
    160.         },
    161.       });
    162.     </script>
    163.             <script type="text/javascript">
    164.       let player8 = new VeoPlayer({
    165.         id: "veo8",
    166.         url: "./test.mp4",
    167.         height: 660,
    168.         width: 445,
    169.         style: {
    170.           themeColor: "#91CB40",
    171.           processColor: "#91CB40",
    172.           animation: true,
    173.           processHeight: 8,
    174.         },
    175.       });
    176.     </script>
    177.             <script type="text/javascript">
    178.       let player9 = new VeoPlayer({
    179.         id: "veo9",
    180.         url: "./test.mp4",
    181.         height: 660,
    182.         width: 445,
    183.         style: {
    184.           themeColor: "#91CB40",
    185.           processColor: "#91CB40",
    186.           animation: true,
    187.           processHeight: 8,
    188.         },
    189.       });
    190.     </script>
    191.             <script type="text/javascript">
    192.       let player10 = new VeoPlayer({
    193.         id: "veo10",
    194.         url: "./test.mp4",
    195.         height: 660,
    196.         width: 445,
    197.         style: {
    198.           themeColor: "#91CB40",
    199.           processColor: "#91CB40",
    200.           animation: true,
    201.           processHeight: 8,
    202.         },
    203.       });
    204.     </script>
    205.             <script type="text/javascript">
    206.       let player11 = new VeoPlayer({
    207.         id: "veo11",
    208.         url: "./test.mp4",
    209.         height: 660,
    210.         width: 445,
    211.         style: {
    212.           themeColor: "#91CB40",
    213.           processColor: "#91CB40",
    214.           animation: true,
    215.           processHeight: 8,
    216.         },
    217.       });
    218.     </script>
    219.   </body>
    220. </html>
    复制代码

    一样可以支持多种格式，效果还不错，不过支持的没有VLC的多。
    相关文件看文章后面源码
    2. kurento 播放rtsp
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <meta http-equiv="cache-control" content="no-cache">
    6. <meta http-equiv="pragma" content="no-cache">
    7. <meta http-equiv="expires" content="0">
    8. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    9. <link rel="shortcut icon" href="./img/kurento.png" type="image/png" />
    10. <script src="./js/jquery.min.js"></script>
    11. <script src="./js/kurento-client.min.js"></script>
    12. <script src="./js/kurento-utils.min.js"></script>
    13. <script src="./js/index.js"></script>
    14. <title>Kurento RTSP to WebRTC player</title>
    15. </head>
    16. <body>
    17.         <div class="container">
    18.                 <div class="page-header">
    19.                         <h1>Kurento RTSP to WebRTC player</h1>
    20.                 </div>
    21.                 <div class="row">
    22.                         <div class="col-md-5">
    23.                                 <h3>播放窗口</h3>
    24.                                 <video id="videoOutput" autoplay width="480px" height="360px" style="border: 1px solid #857f7f;" poster="./img/webrtc.png"></video>
    25.                                 </br>
    26.                                 rtsp/http地址: <input style="width:350px;" id="address" type="text">
    27.                                 </br></br>
    28.                         </div>
    29.                         <div class="col-md-2">
    30.                                 <a id="start" href="#" class="btn btn-success"><span
    31.                                         class="glyphicon glyphicon-play"></span> 播放</a><br /> <br /> <a
    32.                                         id="stop" href="#" class="btn btn-danger"><span
    33.                                         class="glyphicon glyphicon-stop"></span> 暂停</a>
    34.                         </div>
    35.                 </div>
    36.         </div>
    37. </body>
    38. </html>
    复制代码

    这个是别人的代码，测试可用
    3. video.js

    这个没测试成功
    相关源码：
    链接: https://pan.baidu.com/s/19p9qroD-xx5SxX4avW2CEw?pwd=v4cq 提取码: v4cq
    到此这篇关于html网页播放多个视频的几种方法的文章就介绍到这了,更多相关html播放多个视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

    来源：https://www.jb51.net/html5/928814.html
    免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×

    最新评论

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表