предисловие
Видеопроигрыватель H5 — это комплект для разработки, выпущенный Hikvision 3 числа этого месяца. Недавно он занимался видеонаблюдением на большом экране, поэтому я попробовал последние и предыдущие видео WEB-плагины. Должен сказать, если вы просто как и я, он используется только для видеомониторинга в реальном времени и не нуждается в других функциях.Это должно быть первая рекомендация для этого видеоплеера H5.Я кратко поделюсь им с вами ниже.
Загрузка плагина
Официальный сайт:open.Hiconvision.com/download/5От…
Загрузите документы и пакеты H5 Video Player Development Kit V1.0.0 на официальном сайте, а затем вы можете испытать демо-версию самостоятельно в соответствии с инструкциями.
использовать во Вью
первый шаг
Прежде всего, нам нужно поместить файл JS из загруженного пакета в наш собственный файл проекта и импортировать его.Разные файлы необходимо импортировать в соответствии с разными системами, поэтому нам необходимо сделать систематическое суждение.
<script src="<%= BASE_URL %>static/js/h5player.min.js"></script>
<script>
window.onload = function() {
const script = document.createElement('script')
script.type = 'text/javascript'
const agent = navigator.userAgent.toLowerCase()
if (agent.indexOf('win32') >= 0 || agent.indexOf('wow32') >= 0) {
script.src = '<%= BASE_URL %>static/js/playctrl32/Decoder.js'
} else if (agent.indexOf('win64') >= 0 || agent.indexOf('wow64') >= 0) {
script.src = '<%= BASE_URL %>static/js/playctrl64/Decoder.js'
}
document.getElementsByTagName('head')[0].appendChild(script)
}
</script>
второй шаг
импортировать в наш компонент
// 引入JSPlugin
const { JSPlugin } = window;
третий шаг
Теперь запустите создание экземпляра, и теперь вы можете проверить его по загруженному документу и демке. Сначала мы создаем экземпляр. JS_SetOptions — это способ настроить воспроизведение. Здесь мы устанавливаем для bOnlySupportJSDecoder значение true и загружаем только JSDecoder. На самом деле в моих нуждах мониторинговые события в методе initPlugin() почти бесполезны, но я их все равно выписываю.Можно делать разные операции по разным потребностям.Я думаю обратный вызов ошибки очень нужен.Если вы столкнулись с видео не может быть воспроизведено, вы можете проверить "Коды ошибок и их описание"проверить на ошибки
getScript() {
this.oPlugin = new JSPlugin({
szId: this.videoId, // 当前的视频播放的节点，需要英文字母开头，必填
szBasePath: './dist', // 这个是啥我也不知道，但是必填
// 分屏播放
iMaxSplit: 1,
iCurrentSplit: 1,
// 设置样式
oStyle: {
border: '#343434',
borderSelect: 'transparent',
background: '#000'
}
})
this.initPlugin()
this.realplay()
},
// 事件初始化
initPlugin() {
this.oPlugin
.JS_SetWindowControlCallback({
windowEventSelect(iWindIndex) {
// 插件选中窗口回调
this.iWind = iWindIndex
},
pluginErrorHandler(iWindIndex, iErrorCode, oError) {
// 插件错误回调
console.error(
`window-${iWindIndex}, errorCode: ${iErrorCode}`,
oError
)
},
windowEventOver(iWindIndex) {
// 鼠标移过回调
console.log(iWindIndex)
},
windowEventOut(iWindIndex) {
// 鼠标移出回调
console.log(iWindIndex)
},
windowFullCcreenChange(bFull) {
// 全屏切换回调
console.log(bFull)
},
firstFrameDisplay(iWndIndex, iWidth, iHeight) {
// 首帧显示回调
console.log(iWndIndex, iWidth, iHeight)
},
performanceLack(iWndIndex) {
// 性能不足回调
console.log(iWndIndex)
}
})
.then(() => {
this.oPlugin
.JS_SetOptions({
bSupportSound: true, // 是否支持音频，默认支持
bSupportDoubleClickFull: false, // 是否双击窗口全屏，默认支持
bOnlySupportMSE: false, // 只支持 MSE
bOnlySupportJSDecoder: true // 只支持 JSDecoder
})
.then(() => {
console.log('JS_SetOptions')
})
})
},
// 播放初始化
realplay() {
console.log('播放初始化')
// 这个必须要使用ws协议进行流的传输
// 于是决定在后端进行流的获取，前端发送地点名称获得直播的流的地址
// 这里是我向后端请求数据的代码就不贴出来了
//
// 好！这里我们已经拿到了数据
this.oPlugin
.JS_Play(
this.videoUrl,
{
playURL: this.videoUrl, // 流媒体播放时必传
mode: 1 // 解码类型：0=普通模式，1=高级模式，默认为 0
},
this.iWind
)
.then(
(res) => {
console.log(res, '播放成功')
},
(err) => {
console.log(err, '播放失败')
}
)
},
четвертый шаг
Этот шаг должен бытьУведомление, потому что иногда метод создания экземпляра вызывается до загрузки Decoderjs на страницу, что сообщит об ошибке, поэтому мы будем судить об этом шаге.
mounted() {
this.time = setInterval(() => {
const { _JSPlayM4_GetPort, _malloc } = window
if (_JSPlayM4_GetPort && _malloc) {
this.getScript()
clearInterval(this.time)
}
}, 100)
},
конец
Позвольте мне рассказать о том, почему я выбрал этот комплект для разработки вместо другого видео WEB-плагина. Я считаю, что большинство друзей, которые использовали платформу Hikvision для мониторинга, использовали видео WEB-плагин V1.5.1, который также является полнофункциональным плагином, но я даже не могу отладить этот плагин, и Я не могу выбрать этот контейнер воспроизведения на странице, а видеоплеер H5 отрисовывается через Canvas, я могу получить ноду DOM, а также могу изменить стиль этого плеера. И мне нужно установить плагин VideoWebPlugin для запуска в браузере, я думаю, что это не особенно удобно. Конечно, если вы хотите использовать этот видеоплеер H5, вам следует внимательно проверить документ с описанием функций и описанием производительности документа, в котором будет представлена разница между обычным режимом и расширенным режимом, а также совместимость с браузером.
На данный момент мои потребности в основном удовлетворены, очень просто, если вы будете следовать документации и демонстрации, чтобы печатать шаг за шагом, в документации есть много методов, таких как: остановить воспроизведение: JS_Stop, включить звук: JS_OpenSound , видео: JS_StartSave и воспроизведение: JS_Play передает время начала и окончания для реализации воспроизведения и многих других полезных функций.