使用海康H5視訊播放器開發包實現監控播放

huaweichenai發表於2022-03-01
原文網址 : https://segmentfault.com/a/1190000041448067
H5播放器

海康H5視訊播放器開發包demo下載地址：H5視訊播放器開發包
使用H5視訊播放器開發包實現示例：

一：H5視訊播放器開發包引入專案

將H5視訊播放器開發包demo中所有資料夾和h5player.min.js引入到自己的專案中
image.png

二： 引入H5視訊播放器開發包

<script src="h5player.min.js"></script>

三：使用H5視訊播放器開發包實現監控播放

1：html

<div id="player"></div>

2：js

//建立監控例項
var myPlugin = new JSPlugin({
    szId: 'player', //需要英文字母開頭 必填
    szBasePath: '/', // 必填,引用H5player.min.js的js相對路徑
})
var playURL = 'XXXX';//監控地址
var mode = 0;//解碼方式：0普通模式 1高階模式
var index = 0;//當前視窗下標
//監控播放
myPlugin.JS_Play(playURL, { playURL, mode}, index).then(
    () => { console.log('realplay success') },
    e => { console.log(e) }
)

根據如上就可以實現H5視訊播放器開發包播放監控視訊

相關文章