vue的nuxt框架中使用vue-video-player
一、基本需求:使用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
vue的nuxt框架中使用vue-video-player的更多相关文章
- 基于vue的nuxt框架cnode社区服务端渲染
nuxt-cnode 基于vue的nuxt框架仿的cnode社区服务端渲染,主要是为了seo优化以及首屏加载速度 线上地址 http://nuxt-cnode.foreversnsd.cngithub ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- Vue学习之webpack中使用vue(十七)
一.包的查找规则: 1.在项目根目录中找有没有 node_modules 的文件夹: 2.在 node_modules 中根据包名,找对应的vue 文件夹: 3.在vue 文件夹中,找 一个叫做 pa ...
- vue项目element-ui框架中的弹窗中的表单验证清除问题
问题回顾: 1.vue项目的在弹窗上的form表单验证,第一次点击新增时正常,第二次新增打开弹窗后由于表单内容为空,出现验证这种情况 2.为了解决上面的情况,在执行点击新增事件加上this.$refs ...
- vue的js文件中获取vue实例
1.main.js导出vue实例: var vue = new Vue({ el: '#app', router, components: { App }, template: '<App/&g ...
- 在Vue&Element前端项目中,对于字典列表的显示处理
在很多项目开发中,我们为了使用方便,一般都会封装一些自定义组件来简化界面的显示处理,例如参照字典的下拉列表显示,是我们项目中经常用到的功能之一,本篇随笔介绍在Vue&Element前端项目中如 ...
- webstorm中新建vue工程
1.在https://nodejs.org/en/下载安装nodejs 2.vue-cli 搭建框架 首先从官方网站安装 node.js,会一并安装 npm工具.注意 npm一定要3.10以上,以免很 ...
- SSM框架中,controller的action返回参数给vue.js
在SSM框架中,controller的action中,返回的是视图,即jsp页面或是ModelAndView,若是通过axios给vue传值的话,需要转换为字符串或是user实体类对象. 使用@Res ...
- 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题
基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...
随机推荐
- Ubuntu替换清华源或者阿里源
倒腾pygame包的问题(Ubuntu 19.10),安装好pip后,又要安装一个pygame的包,倒腾了两天两夜,硬是因为网络问题(可能被强大的墙阻挡了),安装不成功,后面在网上找了篇帖子,用清华源 ...
- iOS 集成友盟分享图片链接为http时无法加载问题解决
一.问题描述 UMShareWebpageObject *obj = [UMShareWebpageObject shareObjectWithTitle:title descr:shareText ...
- 类818tu.c微信小说分销系统设计之定时模板消息源码
近期将出个系列讲解开发过程,同时作为此系统的开发记录吧,万能的博客园,本边讲解如何发送模板消息,并且能够定时发送,下一篇讲解如何处理多个公众号的网页授权登录问题 [后台]http://xiaoshuo ...
- 浅析Python闭包
1.什么是闭包 在介绍闭包概念前,我们先来看一段简短的代码 def sum_calc(*args): def wrapper(): sum = 0 for n in args: sum += n; r ...
- 机器学习 第4篇:数据预处理(sklearn 插补缺失值)
由于各种原因,现实世界中的许多数据集都包含缺失值,通常把缺失值编码为空白,NaN或其他占位符.但是,此类数据集与scikit-learn估计器不兼容,这是因为scikit-learn的估计器假定数组中 ...
- Oracle数据库常见sql
-新建表:create table table_name( id varchar2(300) primary key, name varchar2(200) not null); --插入数据 ins ...
- Java编译执行过程
在刷软件设计师中级考试的题目,判断关于编译系统对某高级语言进行翻译的叙述的对错.记得刚开始学Java的时候自己就觉得自己对程序的执行过程理解的相当的透彻,但是一对答案,我的小心脏就有点受不了了,特此在 ...
- .NET 5 开源工作流框架elsa技术研究
今天假期第一天,研究了.NET 5开源工作流框架elsa,现在分享给大家. 一.框架简介 elsa是一个开源的.NET Standard 工作流框架,官方网站:https://elsa-workflo ...
- 关于.NET中的控制反转(二)- 依赖注入之 MEF
一.MEF是什么 Managed Extensibility Framework (MEF) 是用于创建可扩展的轻量级应用程序的库. 它让应用程序开发人员得以发现和使用扩展且无需配置. 它还让扩展开发 ...
- 浅入 .NET Core 中的内存和GC知识
目录 托管代码 自动内存管理 参考资料: [1]https://docs.microsoft.com/zh-cn/dotnet/standard/managed-code [2]:https://do ...