一、基本需求：使用nuxt框架，需要在移动端网页中播放视频。
二、文中解决的基本问题：
1、vue-video-player在nuxt中怎么使用。
2、由于为了适配移动端，使用了postcss-px2rem插件，如何解决vue-video-player的样式与postcss-px2rem插件的冲突。
3、如何播放m3u8的视频。
三、解决方案：
1、vue-video-player在nuxt中的使用：
1) npm i vue-video-player --save
2) 编写插件： 在plugins目录下新建 videoPlayer.js文件
import Vue from 'vue'
const VueVideoPlayer = require('vue-video-player/dist/ssr')
Vue.use(VueVideoPlayer)
3）创建组件： 在components文件下新建VueVideo.vue文件，注意class="video-player-box" 这个是约定的。
<template>
<section class="vueVideo">
<div
v-video-player:myVideoPlayer="playerOptions"
class="video-player-box"
:playsinline="playsinline"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@loadeddata="onPlayerLoadeddata($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@ready="playerReadied"
@statechanged="playerStateChanged($event)"
></div>
</section>
</template> <script>
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
export default {
data() {
return {
playsinline: true,
playerOptions: {
// 播放器配置
muted: false, // 是否静音
language: 'zh-CN',
// aspectRatio: '16:9',
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
controls: true,
preload: 'auto', // 视频预加载
fluid: true,
sources: [
{
type: 'video/mp4',
src:
'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
}
],
poster: '/imgs/choice/avator.png', // 封面图
notSupportedMessage: '此视频暂无法播放，请稍后再试'
}
}
},
mounted() {
console.log('this is current player instance object', this.myVideoPlayer)
},
methods: {
// 监听播放
onPlayerPlay(player) {
// console.log('player play!', player)
},
// 监听暂停
onPlayerPause(player) {
// console.log('player pause!', player)
},
// 监听停止
onPlayerEnded(player) {
// console.log('player ended!', player)
},
// 监听加载完成
onPlayerLoadeddata(player) {
// console.log('player Loadeddata!', player)
},
// 监听视频缓存等待
onPlayerWaiting(player) {
// console.log('player Waiting!', player)
},
// 监听视频暂停后播放
onPlayerPlaying(player) {
// console.log('player Playing!', player)
},
// 监听视频播放时长更新
onPlayerTimeupdate(player) {
// console.log('player Timeupdate!', player.currentTime())
},
onPlayerCanplay(player) {
console.log('player Canplay!', player)
},
onPlayerCanplaythrough(player) {
// console.log('player Canplaythrough!', player)
},
// 监听状态改变
playerStateChanged(playerCurrentState) {
// console.log('player current update state', playerCurrentState)
},
// 监听播放器准备就绪
playerReadied(player) {
// console.log('example 01: the player is readied', player)
}
}
}
</script> <style lang="scss" scoped></style>
4）配置nuxt.config.js文件
css: [
'video.js/dist/video-js.css',
],
plugins: [{ src: '~plugins/videoPlayer.js', ssr: false }],
5）调用组件（只写了关键代码）
<template>
<div>
<VueVideo></VueVideo>
</div>
</template> import VueVideo from '~/components/VueVideo' components: {
VueVideo
},
2、解决适配问题：
postcss-px2rem插件主要是用来适配各种大小的移动端设备，将px转换成rem。但是他会影响到node_modules中的插件的样式。所以，将postcss-px2rem插件换成postcss-px2rem-exclude插件，postcss-px2rem-exclude的好处是可以排除那些不需要要进行单位转化的文件。
1)安装
npm uninstall postcss-px2rem
npm i postcss-px2rem-exclude -D
2）配置
npm i postcss-px2rem-exclude的官方文档
module.exports = {
'plugins': {
'postcss-px2rem-exclude': {
remUnit: 75,
exclude: /node_modules|folder_name/i
}
}
}
在我的nuxt中的配置是：在nuxt.config.js文件中
build: {
/*
** You can extend webpack config here
*/
postcss: [
require('postcss-px2rem-exclude')({
remUnit: 75,
exclude: /video.js/i
})
]
}
这样postcss-px2rem-exclude就会吧node_modules/video.js文件夹下面的样式排除掉。从而video的样式不会受到postcss-px2rem-exclude的影响。
3、播放m3u8视频
1）先安装videojs-contrib-hls插件
npm i videojs-contrib-hls --save
2)修改之前的videoPlayer.js文件
import Vue from 'vue'
const VueVideoPlayer = require('vue-video-player/dist/ssr')
// 若是只是想播放普通视频，则不需要videojs-contrib-hls
const hls = require('videojs-contrib-hls')
Vue.use(hls)
Vue.use(VueVideoPlayer)
3）修改VueVideo.vue文件，可换成直播流，这是CCTV1的直播流。
sources: [
// {
// type: 'video/mp4',
// src:
// 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
// }
// 直播流
{
type: 'application/x-mpegURL/video/mp4',
src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8'
}
]
最后，十分感谢以下博文，文章参考：
https://blog.csdn.net/wtyzky/article/details/103859955
https://blog.csdn.net/qq_41980461/article/details/104773632?depth_1-utm_source=distribute.pc_relevant_right.none-task-blog-BlogCommendFromBaidu-5&utm_source=distribute.pc_relevant_right.none-task-blog-BlogCommendFromBaidu-5