请选择 进入手机版 | 继续访问电脑版
查看: 22|回复: 0

Html + js接入萤石云实现视频切换播放

[复制链接]
  • 打卡等级:即来则安
  • 打卡总天数:15
  • 打卡月天数:5
  • 打卡总奖励:211
  • 最近打卡:2024-12-10 17:22:58

29

主题

3

回帖

40万

积分

管理员

BSAY论坛创始人

积分
400298
QQ
发表于 2024-11-29 18:02:56 | 显示全部楼层 |阅读模式
通过html和js方式接入萤石云视频,实现的功能有,获取token并缓存,过期重新获取,获取视频并播放

index.html内容如下:
  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>html接入萤石云</title>

  6.     <script src="./js/common/jquery.js"></script>
  7.     <script src="./js/video.js"></script>
  8.     <script src="./js/auth.js"></script>

  9.     <link rel="stylesheet" href="./css/common/index.css">
  10.     <link rel="stylesheet" href="./css/common/map.css">
  11.     <link rel="stylesheet" href="./css/video.css">
  12.     <style>
  13.         .loading {
  14.             width: auto;
  15.             height: auto;
  16.         }
  17.         
  18.         .video-monitor-device-container {
  19.             background: #fff;
  20.             background: #333;
  21.             box-sizing: border-box;
  22.             height: 100%;
  23.             padding: 10px;
  24.             border-radius: 2px;
  25.         }
  26.         
  27.         .video-monitor-device-container .multiple-player-window {
  28.             align-items: flex-start;
  29.             display: flex;
  30.             flex-wrap: wrap;
  31.             height: 100%;
  32.             justify-content: flex-start;
  33.             width: 100%;
  34.         }
  35.         
  36.         .video-monitor-device-container .player-window-item {
  37.             /* border: 0.5px solid #fff; */
  38.             box-sizing: border-box;
  39.             height: 100%;
  40.             width: 100%;
  41.             position: relative;
  42.             /* height: 50%; */
  43.             /* width: 50%; */
  44.         }
  45.     </style>
  46. </head>

  47. <body>

  48.     <!-- <div class="loading">
  49.         <div class="loadbox"> <img src="./images/loading.gif"> 页面加载中... </div>
  50.     </div> -->
  51.     <div class="data">

  52.         <div class="data-content">
  53.             <div class="data_left">
  54.                 <div class="left_tree">
  55.                     <ul class="parent_ul">
  56.                         <li class="parent zhedie">
  57.                             <ul class="child">

  58.                             </ul>
  59.                         </li>
  60.                     </ul>
  61.                 </div>
  62.             </div>
  63.             <div class="data_right">
  64.                 <div class="right_video videobox" id="play">
  65.                     <div class="video-monitor-device-container">
  66.                         <div class="multiple-player-window">
  67.                             <div class="player-window-item">
  68.                                 <div id="video-box1"></div>
  69.                             </div>
  70.                             <!-- <div class="player-window-item">
  71.                                 <div id="video-box2"></div>
  72.                             </div>
  73.                             <div class="player-window-item">
  74.                                 <div id="video-box3"></div>
  75.                             </div>
  76.                             <div class="player-window-item">
  77.                                 <div id="video-box4"></div>
  78.                             </div> -->
  79.                         </div>
  80.                     </div>
  81.                 </div>
  82.             </div>
  83.         </div>
  84.     </div>
  85.     </div>
  86. </body>
  87. <script src="./js/common/videoplay.js"></script>
  88. <script src="./js/common/ezuikit3.js"></script>
  89. <script src="./js/common/jquery.min.js"></script>

  90. </html>
复制代码
video.js内容如下:
  1. var ysUrl = "https://open.ys7.com/api/lapp";
  2. var appKey = "你的key";
  3. var appSecret = "你的secret";
  4. var token = "";

  5. $(function() {
  6.     getDeviceList();

  7.     var initPlay = false;
  8.     var liElements = [];
  9.     //设备列表
  10.     function getDeviceList() {
  11.         if (!token) {
  12.             getAccessToken();
  13.         }
  14.         $.ajax({
  15.             type: "post",
  16.             url: ysUrl + "/device/list",
  17.             dataType: "json",
  18.             headers: {
  19.                 Accept: "application/json; charset=utf-8",
  20.             },
  21.             data: {
  22.                 accessToken: token,
  23.             },
  24.             success: function(res) {
  25.                 if (res.code === '10002') {
  26.                     token = null;
  27.                     localStorage.clear();
  28.                     getAccessToken();
  29.                     getDeviceList();
  30.                 } else {
  31.                     // 组装左侧列表
  32.                     var childUl = document.querySelector('.child');

  33.                     res.data.forEach(function(device, index) {
  34.                         var newLi = document.createElement('li');

  35.                         // 获取通道列表
  36.                         $.ajax({
  37.                             type: "post",
  38.                             url: ysUrl + "/device/camera/list",
  39.                             dataType: "json",
  40.                             headers: {
  41.                                 Accept: "application/json; charset=utf-8",
  42.                             },
  43.                             data: {
  44.                                 accessToken: token,
  45.                                 deviceSerial: device.deviceSerial
  46.                             },
  47.                             success: function(res) {
  48.                                 res.data.forEach((item) => {
  49.                                     newLi.textContent = item.channelName;
  50.                                     childUl.appendChild(newLi);
  51.                                     newLi.addEventListener('click', function(event) {
  52.                                         removeSelectedState();
  53.                                         newLi.classList.add('selected');
  54.                                         playVideo(item, newLi);
  55.                                     });
  56.                                     liElements.push(newLi);
  57.                                 });
  58.                                 //默认视频播放
  59.                                 if (liElements.length > 0 && !initPlay) {
  60.                                     liElements[0].click();
  61.                                     initPlay = true;
  62.                                 }
  63.                             },
  64.                         });
  65.                     });
  66.                 }
  67.             },
  68.         });
  69.     }

  70.     //删除选中播放站点
  71.     function removeSelectedState() {
  72.         liElements.forEach(function(li) {
  73.             li.classList.remove('selected');
  74.         });
  75.     }

  76.     var boxId = "video-box1";
  77.     var player = null;

  78.     function playVideo(camera, p) {
  79.         $.ajax({
  80.             type: "post",
  81.             url: ysUrl + "/v2/live/address/get",
  82.             dataType: "json",
  83.             headers: {
  84.                 Accept: "application/json; charset=utf-8",
  85.             },
  86.             data: {
  87.                 accessToken: token,
  88.                 deviceSerial: camera.deviceSerial,
  89.                 channelNo: camera.channelNo
  90.             },
  91.             success: function(res) {
  92.                 if (player) {
  93.                     player.stop();
  94.                     const videoContainer = document.getElementById(boxId + "-wrap");
  95.                     if (videoContainer) {
  96.                         videoContainer.innerHTML = "";
  97.                     }
  98.                     videoContainer.id = boxId;
  99.                 }
  100.                 const parentElement = $("#" + boxId).parent();
  101.                 const width = parentElement.width();
  102.                 const height = parentElement.height();
  103.                 let playerInstance = new EZUIKit.EZUIKitPlayer({
  104.                     id: boxId,
  105.                     width,
  106.                     height,
  107.                     template: "pcRec",
  108.                     // url: res.data.url,
  109.                     url: "ezopen://open.ys7.com/AK0209686/1.hd.local.rec?begin=20241119085913",
  110.                     accessToken: token,
  111.                 });
  112.                 player = playerInstance;
  113.                 // $("#" + boxId + "-headControl-right").append("<img class='close-icon' src='https://resource.eziot.com/group2/M00/00/6A/CtwQFmGGRrmAYTuHAAABReqamu8593.png' alt='image'>");
  114.                 $("#" + boxId + "-headControl-right").on("click", "img", function() {
  115.                     playerInstance.stop();
  116.                     const videoContainer = document.getElementById(boxId + "-wrap");
  117.                     if (videoContainer) {
  118.                         videoContainer.innerHTML = "";
  119.                     }
  120.                     videoContainer.id = boxId;
  121.                 });

  122.                 $(window).on("resize", function() {
  123.                     const videoBoxWrap = $("#" + boxId + "-wrap");

  124.                     const parentWidth = videoBoxWrap.parent().width();
  125.                     const parentHeight = videoBoxWrap.parent().height();

  126.                     $("#" + boxId + "-headControl" + ", #" + boxId + "-ez-iframe-footer-container").css({
  127.                         width: parentWidth + "px",
  128.                     });

  129.                     $("#" + boxId).css({
  130.                         width: parentWidth + "px",
  131.                         height: parentHeight + "px"
  132.                     });
  133.                 });
  134.             }
  135.         });
  136.     }

  137.     function getAccessToken() {
  138.         let storedToken = localStorage.getItem('accessToken');
  139.         if (storedToken) {
  140.             token = storedToken;
  141.         } else {
  142.             $.ajax({
  143.                 type: "post",
  144.                 url: ysUrl + "/token/get",
  145.                 dataType: "json",
  146.                 async: false,
  147.                 headers: {
  148.                     Accept: "application/json; charset=utf-8",
  149.                 },
  150.                 data: {
  151.                     appKey: appKey,
  152.                     appSecret: appSecret
  153.                 },
  154.                 success: function(res) {
  155.                     token = res.data.accessToken;
  156.                     localStorage.setItem('accessToken', token);
  157.                 },
  158.             });
  159.         }
  160.     }
  161. })
复制代码
逻辑不复杂,可自行消化,我还写了一篇vue3+ts的版本,有兴趣可以试试:https://bsay.cn/forum-27-1.html

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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