使用vue二次开发海康监控H5视频播放

最新推荐文章于 2024-09-25 17:38:41 发布

Kepler_明

最新推荐文章于 2024-09-25 17:38:41 发布

阅读量7k

点赞数 6

分类专栏： vue.js 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/keplers/article/details/117743505

版权

本文档介绍了在Vue项目中使用海康监控H5视频播放包进行二次开发的过程，包括西瓜播放器和阿里云的示例，重点讨论了在Vue中如何处理ws协议流传输、系统位数判断、Decoder.js加载问题以及播放控制和内存管理的挑战。

摘要由CSDN通过智能技术生成

使用vue二次开发海康监控H5视频播放

由于公司项目需要做监控的直播跟回放，所以接触到了这个海康的监控视频播放，本来是打算使用videojs使用rtmp流进行监控的直播，因为现在主流浏览器都不支持flash插件，而videojs使用rtmp流直播的话需要浏览器支持flash，所以果断放弃，后来决定使用hls协议调用H5播放器进行播放。然后当时找了两个H5播放器一个是西瓜播放器，另一个是阿里云Web端播放器，有一说一阿里云的还是很强大的，犹豫hls流延迟比较久，最后公司决定使用海康的H5视频包进行开发

下边是西瓜的demo跟阿里云的demo有兴趣的可以去看看官方文档

西瓜播放器示例demo

这里没写太对只是大致看了看试了一下有兴趣的可以自己去了解了解

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui"
    />
    <meta name="referrer" content="no-referrer" />
    <title>播放器</title>
    <script
      src="https://cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js"
      charset="utf-8"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/xgplayer-hls/dist/index.min.js"
      charset="utf-8"
    ></script>
    <style type="text/css">
      html,
      body {
     
        width: 100%;
        height: 100%;
        margin: auto;
        overflow: hidden;
      }
      body {
     
        display: flex;
      }
      #mse {
     
        flex: auto;
      }
    </style>
    <script type="text/javascript">
      window.addEventListener("resize", function () {
     
        document.getElementById("mse").style.height = window.innerHeight + "px";
      });
    </script>
  </head>
  <body>
    <div id="mse"></div>

    <script type="text/javascript">
      let player = new HlsPlayer({
     
        id: "mse",
        url: "http://58.60.109.114:83/openUrl/7U2qlBC/live.m3u8",
        isLive: true,
        autoplay: true,
        playsinline: true,
        height: "400px",
        width: "400px",
        ignores: ["time", "progress"],
      });
    </script>