Reason: Since it is necessary to access multiple commonly used video streams in a project, I have come into contact with it video.js, so I will make a record here.
frame: vue2 + video.js + videojs-contrib-hls + videojs-flvjs-es6 + videojs-flash + video-js.swf
I won’t talk about the vue installation, just start from the project.
Step 1: Install dependencies
// video.js
npm install video.js
// 安装hls，用于播放 HLS
npm install videojs-contrib-hls
// 安装flv，用于播放 FLV
npm install videojs-flvjs-es6
npm install flv.js
// 安装flash 用于播放 RTMP
npm install videojs-flash
npm install videojs-swf
Dependency version:
"flv.js": "^1.6.2",
"video.js": "^7.21.5",
"videojs-contrib-hls": "^5.15.0",
"videojs-flash": "^2.2.1",
"videojs-flvjs-es6": "^1.0.1",
"videojs-swf": "^5.4.2",
Note: It is relatively important and has many pitfalls.
- The installation
videojs-swfis becauseRTMPit must beflashplayed (RTMP is a TCP-based data transfer protocol proposed by Adobe based on the audio and video FLV encapsulation format corresponding to the Flash Player player). When using flash, you need to introduce the file path, so herevideo.jsyouswfneed Install it for easy reference. Of course, you can also download it yourself and put it in the resource directory for reference. - When installing the above dependencies, you should pay attention to using
npmInstallation. When checking the information, I found some articles saying thatcnpmthere will be some problems with installation, but I have not encountered it, but to avoid it, I should be cautious (after all, people like me are not good at learning. Yes, some problems are quite metaphysical to solve). - Regarding the instructions for RTMP, as of now (2023.08.30) Chrome browser (version 114) and Microsoft Edge (version 116) no longer support it.
flashAnyway, I searched for a long time and couldn’t find the setting place. In the end, I finally found it on the 360 browser. Barely testedRTMPthe playback. - This
videojs-flashplug-in requiresvideo.jsthe cooperation of the version. If the version is wrong, an error will always be reported (The "flash" tech is undefined. Skipped browser support check for that tech.). The solution is to findvideojs-flashthe matching version in the version and then changevideo.jsthe version. The specific method will be introduced in detail later in the article.
Step 2: Introduce dependencies
import videojs from 'video.js'
import 'video.js/dist/video-js.min.css'
import 'videojs-contrib-hls'
import 'videojs-flvjs-es6'
import 'videojs-flash'
import SWF_URL from 'videojs-swf/dist/video-js.swf'
Step 3: Create a player (play video stream)
html part
<template>
<div ref="videoPlayerBox" class="component">
<video class="videoPlayer video-js"></video>
</div>
</template>
JS part
<template>
<div ref="videoPlayerBox" class="component">
<video class="videoPlayer video-js"></video>
</div>
</template>
<script>
import {
VueExtend } from 'vdrag-lib'
import videojs from 'video.js'
import 'video.js/dist/video-js.min.css'
import 'videojs-contrib-hls'
import 'videojs-flvjs-es6'
import 'videojs-flash'
import SWF_URL from 'videojs-swf/dist/video-js.swf'
export default {
data () {
return {
player: null,
streamType: 'RTMP',
streamURL: 'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp'
}
},
watch: {
streamType: function () {
console.log('change streamType')
this.$nextTick(() => {
this.loadPlayer()
})
},
streamURL: function () {
console.log('change streamURL')
this.$nextTick(() => {
this.loadPlayer()
})
},
},
mounted () {
this.initPlayer()
},
beforeDestroy () {
this.disposePlayer()
},
methods: {
// 初始化播放器
initPlayer () {
this.$nextTick(() => {
let playerOption = {
preload: 'auto', // 预加载
autoplay: true, // 自动播放
controls: true,
techOrder: ['html5', 'flvjs', 'flash'], // 这里的顺序一定要 'flvjs' 在 'flash' 前面，要不然 flv 格式的就无法播放了
// 如果报 app.js:242798 Uncaught TypeError: this.el_.vjs_getProperty is not a function 错误，只保留 'flash' 就不报错了
// 报错 The "flash" tech is undefined. Skipped browser support check for that tech. 可以查看 videojs-flash 里面 node_modules 查看需要的 video.js 的版本，然后修改video.js的版本就可以了
flash: {
hls: {
withCredentials: false },
swf: SWF_URL // 引入静态文件swf
},
flvjs: {
mediaDataSource: {
cors: true,
withCredentials: false,
},
},
sources: [
{
src: this.streamURL,
type: this.getType(this.streamType)
}
],
}
this.player = videojs(this.$el.querySelector('.videoPlayer'), playerOption, function onPlayerReady () {
console.log('onPlayerReady', this)
})
})
},
// 重新加载播放器
loadPlayer () {
this.$refs.videoPlayerBox.innerHTML = `<video class="videoPlayer video-js"></video>`
this.$nextTick(() => {
this.initPlayer()
})
},
// 销毁播放器
disposePlayer () {
if (this.player) {
this.player.dispose()
}
},
getType (type) {
let playerType = ''
switch (type) {
case 'FLV':
playerType = 'video/x-flv'
break
case 'HLS':
playerType = 'application/x-mpegURL'
break
case 'RTMP':
playerType = 'rtmp/flv'
break
case 'RTSP':
playerType = 'video/mp4'
break
}
return playerType
}
}
}
</script>