前端 - 视频播放器Dplayer如何监听切换清晰度?

Question

视频播放器Dplayer如何监听切换清晰度

Answer 1

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        quality: [{
            name: 'SD',
            url: 'xxx',
            type: 'normal'
        }, {
            name: 'HD',
            url: 'xxx',
            type: 'normal'
        }],
        defaultQuality: 0,
    },
});

dp.on("quality_start", (quality) => {
    console.log(quality);
})

Answer 2

1、初始化Dplayer

this.videoDp = new Dplayer({
        //播放器的一些参数
        container: document.getElementById('dplayer'),
        autoplay: true, //是否自动播放
        theme: '#65E1C0', //主题色
        loop: false, //视频是否循环播放
        lang: 'zh-cn',
        screenshot: false, //是否开启截图
        hotkey: false, //是否开启热键
        preload: 'auto', //视频是否预加载
        volume: 1, //默认音量
        mutex: false, //阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
        video: {
          //切换清晰度相关代码
          quality: [
            {
              name: '标清',
              url: vm.videoUrl + vm.videoDetail.videoSdName, //视频地址
            },
            {
              name: '高清',
              url: vm.videoUrl + vm.videoDetail.videoUrl, //视频地址
            },
          ],
          defaultQuality: vm.defaultQuality, //切换清晰度相关代码
          type: 'customHls',
          customType: {
            customHls: function (video, player) {
              const hls = new Hls(); //实例化Hls  用于解析m3u8
              hls.loadSource(video.src);
              hls.attachMedia(video);
            },
          },
        },
      });

2、监听切换清晰度：
this.videoDp.switchQuality = function (e) {
//e为quality数组数据对呀索引，例如：0、1
}