vue播放器教程交流（基于vue.jsxgplayer）
vue播放器教程交流（基于vue.jsxgplayer）# 文档地址 https://v2.h5player.bytedance.com/ # 仓库地址 https://github.com/bytedance/xgplayer-vueok，基于Vue的xgplayer视频播放器就介绍到这里。希望对大家有所帮助！<template> <div class="player-wrap"> <Xgplayer :config="config" @player="Player = $event" /> </div> <template> <script> import Xgplayer from 'xgplayer-vue'; export default { data () { ret
今天继续给小伙伴们分享一个西瓜视频播放器Vue组件XGPlayer-Vue。
xgplayer-vue 西瓜视频播放器xgplayer的vue.js版本组件。
安装
$ npm i xgplayer-vue@latest -S
使用插件
<template>
<div class="player-wrap">
<Xgplayer :config="config" @player="Player = $event" />
</div>
<template>
<script>
import Xgplayer from 'xgplayer-vue';
export default {
data () {
return {
config: {
id: 'vs'
url: '/xgplayer-demo.mp4'
}
Player: null
}
}
components: {
Xgplayer
}
}
</script>
// 当前播放时间
console.log(this.Player.currentTime)
// 方法
this.Player.play();
this.Player.pause();
this.Player.reload();
// 播放事件
this.Player.on('play' ()=>{console.log('play')})
更多的诸如尺寸、音量及自动播放等配置可去查看详细配置参数。
https://v2.h5player.bytedance.com/en/config/
另外还支持mp4、hls、flv、dash等播放流。
ending 附上文档及项目地址链接。
# 文档地址
https://v2.h5player.bytedance.com/
# 仓库地址
https://github.com/bytedance/xgplayer-vue
ok，基于Vue的xgplayer视频播放器就介绍到这里。希望对大家有所帮助！
