西瓜播放器自定义加载中状态的样式【采坑日记】【xgplayer】

xgplayer官方文档地址

下面dome是以vue为例

    <div id="mse"></div>

     // 设置视频配置（视频初始化需要异步，否则可能会不生效）,下面只配了dome中需要的
      this.$nextTick(()=>{
        new Player({
            id: 'mse',
            url: '', // 视频地址
            height: '',
            width:'',
            fluid: true,
            videoInit: true,
            playsinline: false, // 自动播放
            poster:'', // 封面地址
        });
      })   

    // 宽高可以直接在这里写死，注意需要加一下position: relative;(如果不加部分手机上可能会出现异常)
    #mse{
        width:351px !important;
        height:197px !important;
        position: relative;
    }
    video{
        position: relative !important;
    }
    // 加载中的背景封面
    .xgplayer-enter{}
    // 加载中的中间logo
    .xgplayer-skin-default .xgplayer-enter .xgplayer-enter-spinner{}

    // 加载中的进度颜色
    .xgplayer-enter .xgplayer-enter-tips{}
    // 播放和暂停
    .xgplayer-skin-default.xgplayer-pause .xgplayer-start{}
    // 加载中的loading
    .xgplayer-skin-default.xgplayer-pause .xgplayer-loading{}
    // 重新播放
    .xgplayer-skin-default .xgplayer-replay{}
    // 播放失败
    .xgplayer-skin-default .xgplayer-error{}