videojs-resolution-switcher-v7
videojs@7 切换清晰度，代码来源于videojs-resolution-switcher，可是作者在videojs@5发布，该项目已经4年没维护了，之前很多人提了PR也没有合并，但是现在video.js都上@7了，直接引用原作者的代码库无法继续运作，所以在原代码的基础上做了一些 bugfix，还有一些优化，后面有时间会把我公司的 Demo ，也发出来。
特此声明：该包仅个人开发以及维护，后期不一定会维护，入坑慎重！如若发生版权问题，最终版权归原作者所有kmoskwiak，若使用该包所产生的法律责任，本人概不负责！
GitHub
各位喜欢的不妨到本项目 GitHub 的给个start，谢谢
安装
npm安装videojs-resolution-switcher-v7插件
npm i @xiaoyexiang/videojs-resolution-switcher-v7引用、使用
记得引用 css 文件，如果样式不是你想要的，可以自己定义 css
普通引用
<link rel="stylesheet" href="videojs.css">
<link rel="stylesheet" href="videojs-resolution-switcher-v7.css">
<video id='video' class="video-js vjs-default-skin"></video>
<script src="video.js"></script>
<script src="videojs-resolution-switcher-v7.js"></script>
<script>
videojs('video', {
controls: true,
plugins: {
videoJsResolutionSwitcher: {
default: 'high',
dynamicLabel: true
}
}
}, function(){
// Add dynamically sources via updateSrc method
player.updateSrc([
{
src: 'http://media.xiph.org/mango/tears_of_steel_1080p.webm',
type: 'video/webm',
label: '360'
},
{
src: 'http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4',
type: 'video/mp4',
label: '720'
}
])
player.on('resolutionchange', function(){
console.info('Source changed to %s', player.src())
})
})
</script>Nuxt.js 使用
本人项目是使用 Nuxt.js 的，下面贴上我的代码
<template>
<div ref="playerWrap" class="player-wrap">
<video
id="elm-yjPlayer"
ref="yjPlayer"
class="player video-js vjs-theme-fantasy vjs-default-skin"
></video>
</div>
</template>
<script>
import 'video.js/dist/video-js.min.css'
import '@xiaoyexiang/videojs-resolution-switcher-v7/lib/videojs-resolution-switcher-v7.css'
import '~/assets/css/videojs-themes/fantasy/index.css'
import videojs from 'video.js'
// 因为项目内的 js 使用了 window，所以必须要在客户端 ```process.client``` 引入，不然打包的时候会报错
if (process.client) {
window.videojs = videojs
require('video.js/dist/lang/zh-CN.js')
require('@xiaoyexiang/videojs-resolution-switcher-v7')
}
export default {
data() {
return {
playOptions: {
autoplay: false,
controls: true,
playbackRates: [0.75, 1, 1.5, 2],
language: 'zh-CN',
label: '超清',
plugins: {
videoJsResolutionSwitcher: {
dynamicLabel: true,
default: 'high'
}
},
sources: [],
controlBar: {
pictureInPictureToggle: false
// fullscreenToggle: false
},
html5: {
hls: {}
},
userActions: {
hotkeys: true
}
}
}
},
async asyncData({ $axios }) {
let videoUrlsData = await $axios.get('/api/video_url')
.then((res) => {
return Promise.resolve(res.data)
})
/*
* videoUrlsData 的格式
* [
{
src: "https://1252685978.vod2.myqcloud.com/9a27125cvodtransgzp1252685978/c0155b3f5285890788786290644/v.f240.m3u8?t=5e574d42&rlimit=5&us=e163173c30&sign=3ccd11cef7ee232ecabc2b0676694d45"
type: "application/x-mpegURL"
label: "超清"
res: 1080
},
{
src: "https://1252685978.vod2.myqcloud.com/9a27125cvodtransgzp1252685978/c0155b3f5285890788786290644/v.f230.m3u8?t=5e574d42&rlimit=5&us=d2c9b54554&sign=8f092e038987bfc506f43f3d8249e3ba"
type: "application/x-mpegURL"
label: "高清"
res: 720
},
{
src: "https://1252685978.vod2.myqcloud.com/9a27125cvodtransgzp1252685978/c0155b3f5285890788786290644/v.f220.m3u8?t=5e574d42&rlimit=5&us=a72989e3b8&sign=7201dc0ce1f68778fd4b6844f34b17ab"
type: "application/x-mpegURL"
label: "标清"
res: 480
}
]
后台接口返回的数据格式可能不是我们想要的，可以使用 js 遍历处理下，让格式化成为上方例子
*/
return {
videoUrlsData
}
},
mounted() {
this.initVideoPlayer()
},
beforeDestroy() {
// 页面销毁的时候，也要销毁播放器实例
if (this.player) {
this.player.dispose()
}
},
methods: {
initVideoPlayer() {
this.playOptions.sources = this.videoSourceList
if (process.client) {
// eslint-disable-next-line
this.player = videojs(this.$refs.yjPlayer, this.playOptions, () => {
// console.log(this.playOptions)
// console.log(this)
// console.log(this.player)
this.player.on('resolutionchange', () => {
console.log('[切换视频源]')
})
})
}
},
}
}
</script>