preface
H5 video player is hai kang in this month 3 only launched a development kit, happened recently in what time the video monitoring, the new and previous video WEB plugins are tried once, have to say, if your requirements as well as I is only used for real-time video monitoring without the need for other function, must be first recommend this H5 video player, The following simple to share with you.
Plug-in download
Liverpoolfc.tv: open.hikvision.com/download/5c…
Download the H5 video player development kit V1.0.0 from the official website, and you can experience the demo according to the instructions. Here is no more verbose.
Used in Vue
The first step
First of all, we need to download the JS files in the program package into our own project files and introduce, according to different systems need to introduce different files, so we need to make a system judgment
<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>
Copy the codeThe second step
In our component
/ / introduce JSPlugin
const { JSPlugin } = window;
Copy the codeThe third step
JS_SetOptions is the way to configure playback. Here we set bOnlySupportJSDecoder to true and only load JSDecoder. Actually in my demand initPlugin () to monitor events in this method don’t have access to almost all, but still write it, you can do it according to the different needs of different operation, the error correction that I think is very be necessary, if there are any video cannot play, can control the document the last error code and description to check for errors
getScript() {
this.oPlugin = new JSPlugin({
szId: this.videoId, // The node where the current video is played must start with a letter
szBasePath: './dist'.// I don't know what this is, but it must be filled in
// Split screen playback
iMaxSplit: 1.iCurrentSplit: 1.// Set the style
oStyle: {
border: '# 343434'.borderSelect: 'transparent'.background: '# 000'}})this.initPlugin()
this.realplay()
},
// Event initialization
initPlugin() {
this.oPlugin
.JS_SetWindowControlCallback({
windowEventSelect(iWindIndex) {
// The plugin selects the window callback
this.iWind = iWindIndex
},
pluginErrorHandler(iWindIndex, iErrorCode, oError) {
// Plug-in error callback
console.error(
`window-${iWindIndex}, errorCode: ${iErrorCode}`,
oError
)
},
windowEventOver(iWindIndex) {
// mouse over callback
console.log(iWindIndex)
},
windowEventOut(iWindIndex) {
// Mouse over callback
console.log(iWindIndex)
},
windowFullCcreenChange(bFull) {
// Full screen switch callback
console.log(bFull)
},
firstFrameDisplay(iWndIndex, iWidth, iHeight) {
// The first frame shows a callback
console.log(iWndIndex, iWidth, iHeight)
},
performanceLack(iWndIndex) {
// Insufficient performance callback
console.log(iWndIndex)
}
})
.then(() = > {
this.oPlugin
.JS_SetOptions({
bSupportSound: true.// Whether audio is supported by default
bSupportDoubleClickFull: false.// Whether to double-click a window in full screen
bOnlySupportMSE: false.// Only MSE is supported
bOnlySupportJSDecoder: true // Only JSDecoder is supported
})
.then(() = > {
console.log('JS_SetOptions')})})},// Play initialization
realplay() {
console.log('Play initialization')
// This must use the WS protocol for stream transmission
// It is decided to fetch the stream at the back end, and the front end sends the location name to get the address of the stream
// Here is my back end request data code is not posted
//
/ / good! So here we have the data
this.oPlugin
.JS_Play(
this.videoUrl,
{
playURL: this.videoUrl, // Mandatory for streaming media playback
mode: 1 // Decode type: 0= normal mode, 1= advanced mode, default is 0
},
this.iWind
)
.then(
(res) = > {
console.log(res, 'Playback successful')},(err) = > {
console.log(err, 'Playback failed')})},Copy the codeThe fourth step
This step is very important, because sometimes Decoderjs calls the create instance method before loading the page, which is an error, so we will have this step
mounted() {
this.time = setInterval(() = > {
const { _JSPlayM4_GetPort, _malloc } = window
if (_JSPlayM4_GetPort && _malloc) {
this.getScript()
clearInterval(this.time)
}
}, 100)},Copy the codeAt the end
Here’s why I chose this development kit instead of another video WEB plug-in. I believe that most of you who have used Hikang platform to achieve monitoring have used video WEB plug-in V1.5.1, which is also a plug-in with perfect functions. However, I can’t even debug this plug-in. I can’t select the playback container on the page, while H5 video player is drawn by Canvas. I can get the DOM node and I can change the style of the player. And I need to install a VideoWebPlugin to run in the browser, which I don’t think is particularly friendly. Of course, if you want to use this H5 video player, you should have a good look at the function description and performance description of the document, which will introduce the differences between normal mode and advanced mode as well as browser compatibility.
So far, my needs have been basically met, very simple, as long as everyone according to the document and demo step by step to type out, there are many methods in the document, such as: stop play: JS_Stop, open sound: JS_OpenSound, video: JS_StartSave, and play: JS_Play passes in start and end times for playback and many more useful features.