foreword
- Vue2.0 and Video.js (5.18.4) versions, videojs-contrib-hls.js are used
problems encountered
- If Android cannot play it, it is because videojs-contrib-hls.js is not imported, just find the latest version and import it. ios can also be played without importing.
- If you want to use the width and height of the video itself, you need to add style= {objectFit: 'contain' } to the video tag. contain: adapt to the width and height of the video itself (no deformation) fill: fill the width and height of the video tag (the video may be played is stretched and widened, the playback area will be deformed)
<video
id="videoPlayer"
ref="videoPlayer"
class="video-js"
x5-video-player-fullscreen="true"
x5-playsinline
playsinline
webkit-playsinline
preload="metadata"
width="100%"
height="100%"
:style="{
objectFit: 'contain',
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat'
}"
muted
controls
></video>
- Videojs initialization timing: If it is displayed after the network request obtains the data, it will be initialized after the data request. For example, the following pseudo code:
async getData() {
const rsp = await getPromise() // 接口数据
// 在进行初始化videojs
this.createVideo()
}
createVideo() {
let options = {
language: 'zh-CN'
}
let _this = this
videojs.addLanguage('zh-CN', {
'You aborted the media playback': '视频播放被终止',
'A network error caused the media download to fail part-way.': '网络错误导致视频下载中途失败。',
'The media could not be loaded, either because the server or network failed or because the format is not supported.':
'视频因格式不支持或者服务器或网络的问题无法加载。',
'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.':
'由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。',
'No compatible source was found for this media.': '无法找到此视频兼容的源。'
})
this.player = videojs(this.$refs.videoPlayer, options, function onPlayerReady() {
console.log('onPlayerReady')
})
this.player.on('click', function() {
console.log('开始点击 ')
})
this.player.on('loadstart-3', function() {
console.log('开始请求数据 ')
})
this.player.on('progress', function() {
console.log('正在请求数据5')
})
this.player.on('loadedmetadata', function() {
console.log('获取资源长度完成-4')
})
this.player.on('canplaythrough', function() {
console.log('视频源数据加载完成-8')
})
this.player.on('waiting', function() {
console.log('等待数据2')
})
this.player.on('play', function() {
console.log('视频开始播放-1')
})
this.player.on('playing', function() {
console.log('视频播放中-7')
if (_this.userInfo.osType.toLowerCase() == 'ios') {
_this.isPlaying = true
}
})
this.player.on('pause', function() {
_this.isPlay = false
console.log('视频暂停播放')
})
this.player.on('ended', function() {
_this.isPlay = false
_this.isEnd = true
console.log('视频播放结束')
})
this.player.on('error', function() {
_this.isError = true
console.log('加载错误')
})
this.player.on('seeking', function() {
console.log('视频跳转中')
})
this.player.on('seeked', function() {
console.log('视频跳转结束')
})
this.player.on('ratechange', function() {
console.log('播放速率改变')
})
this.player.on('timeupdate', function(event) {
console.log('播放时长改变')
let video = document.querySelector('.video-js').getElementsByTagName('video')[0]
if (video.currentTime > 0.1) {
_this.isPlaying = true
}
if (60 * 5 <= parseFloat(video.currentTime)) {
console.log('------if 播放了5分钟暂停')
_this.isPlay = false
_this.isEnd = true
_this.player.pause()
}
})
this.player.on('volumechange', function() {
let video = document.querySelector('.video-js').getElementsByTagName('video')[0]
console.log('volumechange', video.muted)
video.muted = _this.muted
})
this.player.on('stalled', function() {
console.log('网速异常')
})
},
- When playing on ios and android, their timings are different. In the case of ios, when playing, as long as the this.player.play() method is executed, the cover poster will not be displayed. In this way, the black background of videojs will be displayed when the video is not loaded, so the experience effect is very bad. And Android will display the cover poster when the video is loaded and not played. So here we cover a div in videojs in a unified way to display the cover. The method of setting the cover this.player.poster('xxx/xxx.png') The following cover does not display the timing: ( especially important )
this.player.on('timeupdate', function(event) {
console.log('播放时长改变')
let video = document.querySelector('.video-js').getElementsByTagName('video')[0]
if (video.currentTime > 0.1) {
_this.isPlaying = true // 安卓正在播放不显示封面时机
}
})
this.player.on('playing', function() {
console.log('视频播放中-7')
if (_this.userInfo.osType.toLowerCase() == 'ios') {
_this.isPlaying = true // ios正在播放不显示封面时机
}
})
// html代码
<div class="my-poster" v-if="!isPlaying"><img :src="bg" class="img"/></div>
5. Add events to videojs, you can click the playback area to pause or play the video, but videojs cannot bind the click event, only touchstart, which will cause the corresponding event to be triggered if the video area is touched when scrolling the page. So we don't add its touchstart here, but add the play button, pause event, and jump event by ourselves. Add html and buttons on videojs.