海康视频对接

利用 websocket

采用海康返回的 websocket 链接地址

下载 H5视频播放器开发包

链接 https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=10

下载 文档和程序包

文档： 描述引入的 h5player.min.js 怎么使用

程序包: 包含一个 demo ，可以打开demo源码查看具体有哪些用法，可对应文档一起看, 有 h5player.min.js 等资源

直接引入 demo 中的 h5player.min.js Decoder.js AudioRenderer.js SuperRender_10 DecodeWorker js 文件

DecodeWorker.js 文件中的 importScripts 方法 如果报错 需要注释

如果是加载 h265 编码的视频 还会加载 Decoder.wasm 只需将该文件根据报错提示放置到指定目录即可；不可用script标签提前加载

如下是一个单窗口显示视频 示例代码

// 先引入 h5player.min.js
const curIndex = 0; // 当前窗口下标
const player = new window.JSPlugin({
    szId: '显示视频模块的标签ID', // 需要英文字母开头 必填
    szBasePath: "./", // 必填,引用H5player.min.js的js相对路径
    // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
    // iWidth: 600,
    // iHeight: 400,
    iMaxSplit: 1, // 分屏播放，默认最大分屏4*4
    iCurrentSplit: 1,
    openDebug: true,
    oStyle: { // 样式
        borderSelect: '#FFCC00',
    }
})
player.JS_Play(
    wsUrl, // wsUrl 为提供的 websocket 链接地址
    {
        playURL: wsUrl, // 流媒体播放时必传
        mode: 0, // 解码类型：0=普通模式; 1=高级模式 默认为0  h265 格式的也可以用 普通模式

        // 设置直连时的认证参数等
    },
    curIndex, //当前窗口下标

    // 回放参数
    // startTime,
    // endTime,
).then(
    () => { 
        console.log('realplay success') 
    },
    e => { 
        console.error(e) 
    }
)

利用 HLS 方式

官方仓库: https://github.com/video-dev/hls.js

引入 hls.js

// 参考
// https://github.com/video-dev/hls.js/blob/master/docs/API.md#first-step-setup-and-support

var video = document.getElementById('video');
var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
if (Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    // bind them together
    hls.attachMedia(video);
    hls.on(Hls.Events.MEDIA_ATTACHED, function () {
      console.log('video and hls.js are now bound together !');
      hls.loadSource('http://my.streamURL.com/playlist.m3u8');
      hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
        console.log(
          'manifest loaded, found ' + data.levels.length + ' quality level'
        );
        video.play();
      });
    });
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = videoSrc;
}