企业官网建设流程全解析

海康视频回放

1. 海康的视频归档之后是不能在传统浏览器播放的
2. 原因

• [IMKH 私有头]
• [MPEG-PS 节目流]
• [H.265 视频帧]
• 浏览器认的是标准 MP4：ftyp + moov + mdat，编码一般是 H.264。遇到 IMKH 连容器都认不出，更别说里面的 H.265。本机能播，是因为 VLC / VSPlayer 自带海康 demux 和 HEVC 解码器

解决方案

• 后端解码，前端接受
  • 使用ffmpage
    上述方案会非常吃cpu内存，大约开启一个需要30%
  • 如果采用这个方案考虑一下带宽
• 前端解码
  你可以采用我的npm包

npmi hik-ps-player

前端解码

vue3 版本

<script setup> import { HikPsVideo } from 'hik-ps-player/vue3' </script> <template> <div style="width: 100%; height: 500px"> // 你的服务器文件地址 <HikPsVideo :src="url" /> </div> </template>

vue2版本

<script> import { HikPsVideo } from 'hik-ps-player/vue2' export default { components: { HikPsVideo }, } </script> <template> <HikPsVideo :src="url" /> </template>

react版本

import{HikPsVideo}from'hik-ps-player/react'exportfunctionPage(){return<HikPsVideo src={url}/>}

自己创建

import{onBeforeUnmount,onMounted,ref}from'vue'import{createHikPlayer}from'hik-ps-player'constbox=ref<HTMLElement|null>(null)conststatus=ref('')letplayer:Awaited<ReturnType<typeofcreateHikPlayer>>|null=nullconsturl='你的地址'onMounted(async()=>{if(!box.value)returnplayer=awaitcreateHikPlayer({container:box.value,url,onStatus:(text)=>{status.value=text},})})onBeforeUnmount(()=>{player?.destroy()player=null})functiononToggle(){player?.toggle()}

切片

• 插件本地采取切片请求的方式获取数据
  

• 插件内部会包含内存释放机制，会丢弃之前部分解析帧
  
  所以不论你的视频有多长都不会导致前端页面卡断，这里我开启了6个浏览器，你会发现cpu基本不会动

跳转控制

• 两头夹击 (bracketTarget)
• 比例盲猜 + 真实收敛 (convergeBracket)
• 寻找最近的关键帧 (findKeyframeBefore)
  上述操作会保证点击位置的确定性

水印提供

• 组件提供水印配置