vue西瓜播放器xgplayer-vue实现视频倍速播放，自定义进度条样式

介绍

npm网站：https://www.npmjs.com/package/xgplayer-vue

西瓜播放器官网：https://v2.h5player.bytedance.com/gettingStarted/

xgplayer是一个web视频播放器库。它设计了一个独立的、可分离的UI组件，其原理是所有东西都是组件化的。更重要的是，它不仅在UI层灵活，而且在功能上大胆：它摆脱了视频加载、缓冲和对视频依赖的格式支持。特别是在mp4上，它可以分阶段加载不支持流式mp4的数据。这意味着无缝切换具有清晰度、负载控制和视频节省。它还集成了对FLV、HLS和dash的按需和实时支持。

xgplayer-vue是封装xgplayer的vue组件。

在开发中需要实现视频倍速播放，于是使用到了xgplayer-vue

环境

vue2

xgplayer-vue@latest

安装

npm install xgplayer-vue@latest

使用

1.添加 xgplayer-vue组件。

script中引入

import Xgplayer from 'xgplayer-vue';
export default {
    
    
  components:{
    
    
    Xgplayer
  }
}

2.在template中使用

<Xgplayer :config="config" @player="Player = $event"/>

3.配置xgplayer

width和height设置一下、不设置的话默认宽高是600*337

playbackRate设置倍速，显示效果如下：

扫描二维码关注公众号，回复： 13211165 查看本文章

script中data配置config对象

import Xgplayer from 'xgplayer-vue';
export default {
    
    
  components:{
    
    
    Xgplayer
  },
  data () {
    
    
    return {
    
    
      config: {
    
    
        id: 'vs',
        url: '/xgplayer-demo.mp4',//修改为能播放的视频地址
        width: '100%',//宽度可以是 数字 ，也可以是百分比
        height: 600,
        playbackRate: [0.5, 0.75, 1, 1.5, 2],//倍速
      },
      Player: null
    }
  }
}

运行成功如下图所示

自定义进度条颜色

详细配置文档在此：https://v2.h5player.bytedance.com/config/

但是我没找到进度条颜色配置。

右键单击进度条，打开审查元素，找到你想修改的节点

我这这里修改了background-image，进度条果然变成了蓝色

然后使用::v-deep ，复制审查元素中的class到v-deep后面，如果要修改其他配置中没有的样式，也可以这样操作。

<style scoped>
::v-deep .xgplayer-skin-default .xgplayer-progress-played{
    
    
    background-image: linear-gradient(90deg,#3983c5,#0e5591);
}
</style>