发帖
手机端
扫码访问
 立即注册
 登录
QQ登陆
BSAY论坛»论坛 › 软件开发 › Html › Html + js接入萤石云实现视频切换播放
返回列表 发新帖
查看: 10|回复: 0

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

[复制链接]
admin
  • 打卡等级：偶尔看看
  • 打卡总天数：13
  • 打卡月天数：3
  • 打卡总奖励：200
  • 最近打卡：2024-12-04 15:22:08

28

主题

3

回帖

40万

积分

管理员

BSAY论坛创始人

积分
400272
QQ
发表于 6 天前 | 显示全部楼层 |阅读模式
通过html和js方式接入萤石云视频，实现的功能有，获取token并缓存，过期重新获取，获取视频并播放

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

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

  8.     <script src="./js/common/jquery.js"></script>
  9.     <script src="./js/video.js"></script>
  10.     <script src="./js/auth.js"></script>

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

  51. <body>

  53.     <!-- <div class="loading">
  54.         <div class="loadbox"> <img src="./images/loading.gif"> 页面加载中... </div>
  55.     </div> -->
  56.     <div class="data">

  58.         <div class="data-content">
  59.             <div class="data_left">
  60.                 <div class="left_tree">
  61.                     <ul class="parent_ul">
  62.                         <li class="parent zhedie">
  63.                             <ul class="child">

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

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

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

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

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

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

  75.     //删除选中播放站点
  76.     function removeSelectedState() {
  77.         liElements.forEach(function(li) {
  78.             li.classList.remove('selected');
  79.         });
  80.     }

  82.     var boxId = "video-box1";
  83.     var player = null;

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

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

  133.                     const parentWidth = videoBoxWrap.parent().width();
  134.                     const parentHeight = videoBoxWrap.parent().height();

  136.                     $("#" + boxId + "-headControl" + ", #" + boxId + "-ez-iframe-footer-container").css({
  137.                         width: parentWidth + "px",
  138.                     });

  140.                     $("#" + boxId).css({
  141.                         width: parentWidth + "px",
  142.                         height: parentHeight + "px"
  143.                     });
  144.                 });
  145.             }
  146.         });
  147.     }

  149.     function getAccessToken() {
  150.         let storedToken = localStorage.getItem('accessToken');
  151.         if (storedToken) {
  152.             token = storedToken;
  153.         } else {
  154.             $.ajax({
  155.                 type: "post",
  156.                 url: ysUrl + "/token/get",
  157.                 dataType: "json",
  158.                 async: false,
  159.                 headers: {
  160.                     Accept: "application/json; charset=utf-8",
  161.                 },
  162.                 data: {
  163.                     appKey: appKey,
  164.                     appSecret: appSecret
  165.                 },
  166.                 success: function(res) {
  167.                     token = res.data.accessToken;
  168.                     localStorage.setItem('accessToken', token);
  169.                 },
  170.             });
  171.         }
  172.     }
  173. })
复制代码
逻辑不复杂，可自行消化，我还写了一篇vue3+ts的版本，有兴趣可以试试：https://bsay.cn/forum-27-1.html

回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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