no-framework-video-player v0.0.4

【前端】pc 播放器组件

使用方式

• 1.创建实例

import VideoPlayer from 'no-framework-video-player';
const videoPlayer = new VideoPlayer({
  target: document.getElementById('video'),
  props: {
    // 是否自动播放
    autoPlay: true,
    // 加载动画使用同花顺logo
    loadingType: 'ths',
    // 加载中的文案
    loadingText: '',
    // 视频地址
    src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
  }
});
// 响应式的修改视频播放器的信息
videoPlayer.$$set({
                type: 'm3u8',
                controlBtns: [
                    'progress',
                    'progressTime',
                    'speedRate',
                    'volume',
                    'setting',
                    'pip',
                    'pageFullScreen',
                    'fullScreen',
                ],
                src: 'https://apd-65f952198b079d44ae6259b57f149420.v.smtcdns.com/mv.music.tc.qq.com/Agxi661cQ4dgUk-YYtb57kQOV8qAfhzk9PkGL63aI2Ww/B31668EF2AF834F7B39B8C23AF46A9E333AF1EEB77436A8323B92B4761AC524A14D71B884B41ED1E42D708A610FD2A9EZZqqmusic_default/qmmv_0b53q4aaoaaapeaagbl6yvrvjbyaa6dqab2a.f9944.m3u8'
            })
// 监听视频开始加载
videoPlayer.$on('loadstart', () => {
  console.log('loadstart');
});
// 监听视频播放的当前时间改变
videoPlayer.$on('timeupdate', ({ detail }) => {
  console.log(detail.currentTime, detail.duration);
});

参数说明

Events