一、安装组件:vue-video-player
npm install vue-video-player -S
二、配置vue.config.js(目的是把videojs提升为全局变量)
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
videojs: ‘video.js’,
})
]
}
或
chainWebpack: config => {
config
.plugin(‘provide’)
.use(webpack.ProvidePlugin, [{
videojs: ‘video.js’,
‘window.videojs’: ‘video.js’
}])
}
三、配置main.js
import VideoPlayer from ‘vue-video-player’
import ‘video.js/dist/video-js.css’
import ‘vue-video-player/src/custom-theme.css’
// 加载国际化相关js (如果不需要则上面的第二个步骤可以省略)
import ‘video.js/dist/lang/zh-CN.js’
Vue.use(VideoPlayer)
四、html部分
五、javascript部分
playerOptions: {
// 播放速度
playbackRates: [0.5, 1.0, 1.5, 2.0],
// 如果true,浏览器准备好时开始回放。
autoplay: false,
// 默认情况下将会消除任何音频。
muted: false,
// 导致视频一结束就重新开始。
loop: false,
// 建议浏览器在加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
preload: ‘auto’,
language: ‘zh-CN’,
// 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
aspectRatio: ‘16:9’,
// 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
fluid: true,
sources: [{
// 类型
type: “video/mp4”,
// url地址
src: ‘’
}],
// 你的封面地址
poster: ‘’,
// 允许覆盖Video.js无法播放媒体源时显示的默认信息
notSupportedMessage: ‘此视频暂无法播放,请稍后再试’,
controlBar: {
// 分隔符 ‘/’
timeDivider: true,
// 总时间
durationDisplay: true,
// 剩余播放时间
remainingTimeDisplay: false,
//全屏按钮
fullscreenToggle: true
}
}
到此就已经一切ok了。
下面再提供几个常用的方法:
- 重新赋值视频地址
this.playerOptions.sources[0].src = ‘http://vjs.zencdn.net/v/oceans.mp4’
或
this.playerOptions.sources = [{
type: “video/mp4”,
src: ‘http://vjs.zencdn.net/v/oceans.mp4’
}] - 获取视频的总时长与当前播放进度
// 监听 timeupdate 事件
onPlayerTimeupdate (player) {
let {currentTime, duration} = player.cache_
console.log(‘当前进度:’, currentTime, ’ 秒, 总时长: ', duration, ‘秒’)
} - 设置视频播放进度
// 监听 ready 事件,或其他合适的时机
onPlayerReadied (player) {
player.currentTime(30)
}
记录:针对杨总提到的HTTP Live Streaming,找到了两篇文章,后期有需要时可以参考一下。
- https://segmentfault.com/a/1190000020149370
- https://www.jianshu.com/p/8cfc2c953d8a?utm_campaign=haruki