vue项目使用视频播放器vue-video-player
安装使用
插件有版本限制，如果项目使用的是vue2.0版本，请选择安装@4.x版本，否则会安装不成功；
yarn add vue-video-palyer --save
或者
npm install vue-video-palyer --save组件页面
<div class="content" id="video-content"><video-player class="video-player vjs-custom-skin" ref="videoPlayer":playsinline="true" :options="playerOptions" @play="onPlayerPlay($event)"@pause="onPlayerPause($event)":events="events"@fullscreenchange="handlefullscreenchange"></video-player>
</div>data(){return {//配置playerOptions : {id: "vue-video-player",playbackRates : [ 0.5, 1.0, 1.5, 2.0 ], //可选择的播放速度autoplay : true, //如果true,浏览器准备好时开始回放。muted : true, // 默认情况下将会消除任何音频。loop : false, // 视频一结束就重新开始。preload : 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）language : 'zh-CN',aspectRatio : '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）fluid : true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。sources : [ {type : "video/mp4",src : this.$route.query.videoUrl,//url地址} ],poster : "", //你的封面地址notSupportedMessage : '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar : {timeDivider : true,//当前时间和持续时间的分隔符durationDisplay : true,//显示持续时间remainingTimeDisplay : false,//是否显示剩余时间功能fullscreenToggle : true //全屏按钮}} }
}更新中..........
⭐ ⭐ ⭐ 作者： 船长在船上
vue项目使用视频播放器vue-video-player相关推荐
- Mac视频播放器Elmedia Video Player Pro for Mac
Elmedia Video Player for Mac是Mac平台上一款能够为您播放各种文件类型的万能视频播放器,您可以用Elmedia Video Player Mac版进行flash.silve ...
- 在Vue中自制视频播放器（上）
在Vue中自制视频播放器(上) 前言 初始化组件 开始/暂停按钮 停止按钮 静音按钮 视频播放时间 全屏按钮 源代码 前言 平时大家在浏览视频网站时,会发现各大视频网站都有自己的视频控制组件,虽然浏览 ...
- vue中DPlayer视频播放器使用方法
vue中DPlayer视频播放器使用方法 1通过npm下载 npm install dplayer - s 2在需要使用的组件中导入 import Dplayer from 'Dplayer' 3页面 ...
- android 实现视频播放功能,Android项目实现视频播放器
本文实例为大家分享了Android项目实现视频播放器的具体代码,供大家参考,具体内容如下 VideoView控件是播放视频用的,借助它可以完成一个简易的视频播放器. ①在activity_main.x ...
- Vue中路由管理器Vue Router使用介绍（三）
2019独角兽企业重金招聘Python工程师标准>>> 一.路由定义添加动态参数定义 1.路由定义项,使用:xx 方式 定义动态参数 {path:'/user/:id/:name', ...
- Vue项目使用拦截器和JWT验证 完整案例
挺详细的一个案例项目,值得参考! 作者:YXi https://juejin.im/post/6844903959883218951) https://gitee.com/gitee_fanjunya ...
- Vue项目 音乐播放器 学习笔记 列表数据 Ⅱ
Home 组件 1. 创建新 Home 2. 创建 Home 相关组件 3. 编写组件代码 Home 组件 1. 创建新 Home 在 views 文件夹中新建 Home 文件夹用来存放主页的视图,将 ...
- vuex构建vue项目_如何使用Vue.js，Vuex，Vuetify和Firebase构建单页应用程序
vuex构建vue项目 如何使用Vuetify和Vue路由器安装Vue并构建SPA (How to install Vue and build an SPA using Vuetify and Vue ...
- 摄屏播放插件html5,Js视频播放器插件Video.js使用方法详解
Video.js快速入门 我们可以下载 Video.js 的源码放到自己的服务器上,或者使用免费的 CDN 托管版本. 在页面中引用video-js.cs样式文件和video.js 使用免费的CDN托 ...
最新文章
- sql语句 case
- 最短路径—Dijkstra算法和Floyd算法
- mysql的检查点_转载一篇关于mysql检查点的文章
- Overfull \hbox或Underfull \hbox错误提示 基于LaTex+VSCode+MAC
- 互联网公司GitHub repo 语言使用情况
- 基于容器原理(docker、lxc、cells)的Android 双系统设计概要
- 关于std::string和 C-style string的一些知识点备忘
- fanuc机器人试题_E01OF工业机器人FANUC系统维护试题库.docx
- NOR Flash与NAND Flash区别
- java 毕向东_毕向东java视频目录
- vulnhub-DC-9靶机渗透记录(适合新手详细版)
- 城市电子地图站点 推荐
- 通信原理第三章：正弦波加窄带高斯噪声
- linux 拒绝访问文件夹,文件夹拒绝访问的原因与解决办法
- 微信小程序自定义switch中带文字效果
- python中的类怎样理解_深入理解Python中的元类(metaclass)
- 天干、地支纪年 月 日
- 大容量光传输技术进展与 400G C+L 系统研究
- Angular：解决innerHTML绑定页面内容，sanitizing HTML stripped some content警告处理和富文本背景色样式无法正常显示的问题
- 30岁的女程序员该何去何从
热门文章