Plyr – 一个轻量级的 HTML5 播放器

npm

npm install plyr

Bower

bower install plyr

Ember

ember addon:install ember-cli-plyr

引入plyr

import Plyr from 'plyr';
// 引入样式
import '@/assets/css/plyr.css';

准备一个video容器

   <div class="video">
       <video ref="videoPlayer" class="plyr"></video>
   </div>

初始化播放器配置

const playerOptions = reactive({
    settings: ['captions', 'quality', 'speed', 'loop'],
    autoplay: false,
    quality: {
        default: 1080,
        options: [1080, 720, 480, 240],
    },
})

在onMounted钩子中获取video元素，使用Plyr，并初始化

player.value = new Plyr(videoPlayer.value as HTMLElement, playerOptions)

更多配置请看github，sampotts/plyr: A simple HTML5, YouTube and Vimeo player 定位到Options即可

请求到video不同分辨率下的所有视频地址

async function getmvDetail(id: number) {
    const { data } = await mvDetail(id)
    // videoDate.r为该video的不同分辨率
    videoDate.r = data.data.brs.map((item: any) => item.br)
    // 根据所有分辨率获取所有视频地址，返回pending数组
    const results = videoDate.r.map((br: number) =>
        mvUrl({ id, r: br })
    )
    // 等待所有pending完成
    Promise.all(results).then(ress => {
        console.log(results, 'ress');
        // 处理返回结果
        const sources = ress.map((res: any) => {
            return {
                src: res.data.data.url.replace(/^http:/, 'https:'),
                type: 'video/mp4',
                size: res.data.data.r,
            }
        })
        // 设置视频源，为不同分辨率的视频源设置对印的地址，类型
        player.value.source = {
            type: 'video',
            title: data.data.name,
            sources: sources,
            poster: data.data.cover,
        }
    })
}

我们获取到的每一个不同分辨率下的的结果是这样的, r表示分辨率， url表示该分辨率下的url
更多配置请看github，A simple HTML5, YouTube and Vimeo player 定位到.source即可

这样我们的音乐器就做好啦