web端实现视频播放,视频地址切换,清晰度切换,断点续播
原理:基于原生video标签进行扩展,使用的前端框架为vue2.x。方法一(直接使用video):html部分:<videoid="videoPlayer"ref="videoPlayer"controlspreload="load"autoplay:src="currentSrc"class="video-js"></video>绑定的current
·
原理:基于原生video标签进行扩展,使用的前端框架为vue2.x。
主要功能:视频地址切换,清晰度切换,断点续播,播放记录统计。
方法一(直接使用video):
html部分:
<video
id="videoPlayer"
ref="videoPlayer"
controls
preload="load"
autoplay
:src="currentSrc"
class="video-js"
></video>
绑定的currentSrc为视频播放地址,从后台获取不同清晰度的视频播放url,当点击切换清晰度时,对src属性进行动态切换即可赋值。
进行断点记录和续播:
1.当点击切换视频时,通过this.player.currentTime读取当前播放进度。
2.为video新增播放监听事件,监听到canplaythrough(可以播放事件),再对currentTime赋值即可跳到记录的位置。
mounted(){
this.player.addEventListener('canplaythrough', this.addListener)
}
/**
* 监听播放事件
*/
addListener () {
console.log('可以播放了')
let timer = setInterval(() => {
this.player.currentTime = this.process
if (this.player.currentTime === this.process) {
clearInterval(timer)
}
}, 500)
}
播放记录统计:
1.当监听到视频播放时,播放次数+1即可(需要注意的是,切换清晰度时,不应该再把浏览次数统计进去了)
this.player.addEventListener('play', () => {
if (this.scanFlag) {
console.log('浏览记录++++++++++1')
this.scanFlag = false
}
})
方法二(使用第三方库实现,推荐):
西瓜播放器:https://v2.h5player.bytedance.com/api/#%E5%B1%9E%E6%80%A7
安装:
npm install video.js
引入:
import vedioPlayer from 'xgplayer'
import 'video.js/dist/video-js.css'
使用:
<template>
<div>
<div id="videoPlayer"></div>
</div>
</template>
// 初始化播放器
this.player = new vedioPlayer({
id: 'videoPlayer',
autoplay: true,
volume: 0.3,
loop: true,
url: '',
// poster: '' ,//视频封面
playsinline: true,
height: '100%',
width: '100%',
})
// 设置清晰度
this.player.emit('resourceReady', [
{name: '高清', url: 'xxxxx'},
{name: '流畅', url: 'xxxxx'},
{name: '原画', url: 'xxxxx'}
])
更多推荐
已为社区贡献1条内容
所有评论(0)