前端使用二开Thingsboard一、二、三事(七)-集成海康威视h5player(下)

前端使用二开Thingsboard一、二、三事(七)-集成海康威视h5player(下)

本章接着上一章介绍一些海康H5player拓展开发内容，上面两章基本把预览需要用到的功能都说完了，对于回放模式H5player中调用的api与预览是一样，区别在于接口取流不同，回放接口==/api/video/v2/cameras/playbackURLs==，之后在传入参数时必须要有开始和结束时间，然后根据项目需求添加一些回放模式下的各种功能按钮
接口地址链接: 获取监控点回放取流URLv2

1.H5回放-大致效果图

回放模式大概需要四个参数，监控点编号、开始时间、结束时间（开始结束时间，格式类型：2021-06-29T00:00:00Z）、播放索引，因为是回放所以我设置默认只有一个窗口（索引为0），用户需要先在下拉框中选择设备，时间默认当天时间，然后点击回放就可以进行视频回放了，放回模式下把分页和分屏都去掉了因为没啥实际意义看个人项目需求了，这样回放用户体验感可能并不太好，所以添加了一些回放功能按钮，都是比较简单功能

2.回放功能展示

都是一些简单的调用api的过程，没啥好讲的，直接上代码

// html
<div class="h5backPlay" style="margin-left: 20px;margin-right: 20px;" *ngIf="!live&&!flagCompany">
  <button (click)="suPlay()" style="font-size: 15px;font-weight: bold;margin-left:5px;" class="btn short">暂停</button>
  <button (click)="rePlay()" style="font-size: 15px;font-weight: bold;margin-left:5px;" class="btn short">恢复</button>
  <button (click)="stopPlay()" style="font-size: 15px;font-weight: bold;margin-left:5px;"
    class="btn short">停止回放</button>
  <button (click)="slowPlay()" style="font-size: 15px;font-weight: bold;margin-left:5px;" class="btn short">慢放</button>
  <button (click)="qePlay()" style="font-size: 15px;font-weight: bold;margin-left:5px;" class="btn short">快放</button>
  <input type="datetime-local" [(ngModel)]="posTime" (blur)="posTimeChange($event.target.value)" class="time"
    style="margin-left:5px;">
  <button (click)="posPlay()" style="font-size: 15px;font-weight: bold;" class="btn short">回放定位</button>
</div>
//ts文件中
import * as moment from 'moment';
public startTime: any
public startTimes: any
public