vue使用video插件vue-video-player详解


Posted in Javascript onOctober 23, 2020

本文实例为大家分享了vue使用video插件vue-video-player的具体代码,供大家参考,具体内容如下

进入我们的项目文件夹中,并打开命令行窗口,然后进行下面的步骤:

1、安装vue-video-player

输入命令:

npm install vue-video-player -S

2、引入插件

在项目的入口文件main.js中引入插件,如下:

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

3、使用插件

创建vue组件文件VideoPlayer.vue,文件内容如下:

<template>
 <div>
  <!-- 使用组件 -->
  <video-player class="video-player vjs-custom-skin"
   ref="videoPlayer"
   :playsinline="true"
   :options="playerOptions"
  ></video-player>
 </div>
</template>

<script>
// 导入组件
import {videoPlayer} from 'vue-video-player'
import 'videojs-flash'

export default {
 name: 'VideoPlayer',
 components: {
 videoPlayer
 },
 data () {
 return {
 fileAreaHeight: 100,
 fileType: 'mp4', // 资源的类型
 fileUrl: 'xxx' // 资源的路径地址
 }
 },
 computed: {
  playerOptions () { // 使用计算属性
  const playerOptionsObj = {
   techOrder: ['flash'], // 使用flase播放,可以播放flv格式的文件
   playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
   autoplay: false, // 如果true,浏览器准备好时开始回放。
   muted: false, // 默认情况下将会消除任何音频。
   loop: false, // 导致视频一结束就重新开始。
   // preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
   language: 'zh-CN',
   // aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
   fluid: false, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
   sources: [{
   type: 'video/' + this.fileType, // 资源格式写法:'video/mp4',否则控制台会出现notSupportedMessage设置的错误
   src: this.fileUrl // url地址
   }],
   poster: '', // 你的封面地址
   // width: document.documentElement.clientWidth,
   height: this.fileAreaHeight, // 设置高度,fluid需要设置成flase
   notSupportedMessage: '此视频暂无法播放...', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
   controlBar: {
   timeDivider: true,
   durationDisplay: true,
   remainingTimeDisplay: false,
   fullscreenToggle: true //全屏按钮
   }
  }
  return playerOptionsObj
  }
 }
}
</script>
<style scoped>
.video-js .vjs-big-play-button{ /*对播放按钮的样式进行设置*/ }
</style>

注:

如果在VideoPlayer.vue中不导入组件,则会报如下错误:

vue使用video插件vue-video-player详解

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
JQuery中的ready函数冲突的解决方法
May 17 Javascript
面向对象Javascript核心支持代码分享
May 23 Javascript
关于JavaScript命名空间的一些心得
Jun 07 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
react-router中的属性详解
Jun 01 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
浅谈JS的二进制家族
May 09 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 #Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 #Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 #Javascript
vuejs实现下拉框菜单选择
Oct 23 #Javascript
vue 如何使用递归组件
Oct 23 #Javascript
vue 如何从单页应用改造成多页应用
Oct 23 #Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 #Javascript
You might like
德生BCL3000的电路分析和打磨
2021/03/02 无线电
yii2实现根据时间搜索的方法
2016/05/25 PHP
用JQUERY增删元素的代码
2012/02/14 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
Python 打印中文字符的三种方法
2018/08/14 Python
彻底理解Python中的yield关键字
2019/04/01 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
医院办公室主任职责
2013/12/29 职场文书
低碳环保口号
2014/06/12 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
迁户口计划生育证明
2014/10/19 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
只用Python就可以制作的简单词云
2021/06/07 Python