vue-video-player文档_vue的video插件vue-video-player
使用方法:
1.安装插件
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的组件页面里
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
>
export default {
name: 'BusImg',
data () {
return {
// 视频播放
playerOptions : {
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
sources: [{
type: "",
src: 'http://sante.weixinbe.com/public/supplier/1527739003138040.mp4'//url地址
// src: 'http://www.html5videoplayer.net/videos/madagascar3.mp4'//url地址
// src: "" //url地址
}],
poster: "", //你的封面地址
// width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放,请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
}
}
4.播放按钮的样式设置
.video-js .vjs-big-play-button{}
测试说明:
(1)发现很多的视频格式是无法播放的
sources: [
{
// type: "video/webm", // ok,用ogg也可打开
type: "video/ogg", // ok,用webm也可打开
// type: "video/3gp", //ok
// type: "video/mp4", // ok
// type: "video/avi", //打不开
// type: "video/flv", // 打不开
// type: "video/mkv", // 打不开
// type: "video/mov", // 打不开
// type: "video/mpg", // 打不开
// type: "video/swf", // 打不开
// type: "video/ts", // 打不开
// type: "video/wmv", // 打不开
// type: "video/vob", // 没转化
// type: "video/mxf", // 转化出错
// type: "video/rm", // 转化出错
src: '/static/video/Video_2018-05-15_105711.webm'//本地测试url地址
// src: 'http://www.html5videoplayer.net/videos/madagascar3.mp4'//url地址
}
],
以上为我对一些格式的测试
在线播放MP4链接示例:http://www.html5videoplayer.net/videos/madagascar3.mp4
参考文档:
vue-video-player文档_vue的video插件vue-video-player相关推荐
- vue 导出word文档(包括图片)
vue 导出word文档(包括图片) 1.打开终端,安装依赖 -- 安装 docxtemplater npm install docxtemplater pizzip --save-- 安装 jszi ...
- vue+ts在线文档编辑(类腾讯文档)多人在线编辑-自定义页眉和分页打印(三)
目录 前言 一.自定义页眉内容 二.分页文档打印 1.加入分页符 2.打印方法 3.打印模块完整代码 总结 前言 随着在线办公场景越来越多,同时需要各式各样办公软件,在开发时就用得到在线文档来内容指定 ...
- 【Flutter】插件包选择 ( 查看文档是否全面 | 查看插件包的更新版本次数 | 查看使用示例 | 查看 GitHub 项目的 Star Fork Issues )
文章目录 一.插件包选择 二.查看文档是否全面 三.查看插件的更新版本次数 四.查看使用示例 五.查看 GitHub 项目的 Star Fork Issues 一.插件包选择 开发 Flutter 时 ...
- 【板栗糖GIS】怎么将网络上只能在线预览文档另存为pdf(插件篇)
怎么将网络上只能在线预览文档另存为pdf(插件篇) 目录 1.使用插件,这里推荐FireShot,好用免费 2.安装该插件的方式 3.打开在线预览文档的网址 4.点击插件-截取整个页面并且-另存为pd ...
- viewer vue 文档_vue基于viewer实现的图片查看器
vue2-viewer vue2-viewer 是一款强大的图像浏览插件,可以实现图像的放大预览,旋转,任意比例放大和缩小等功能 vue2-viewer 是viewer.js vue的实现,效果以及样 ...
- 俩万搭建安装SpringBoot+VUE【视频+文档+源码】
下面有在线预览地址 本项目免费开源完整可查阅文档,由 JavaPub 维护更新.可以协助适配不同操作系统及存储平台. 文章目录 适合人群 liawan-vue 俩万 收录 在线预览 文档 技术栈 环境 ...
- SpringBoot+Vue+OpenOffice实现文档管理(文档上传、下载、在线预览)
场景 SpringBoot集成OpenOffice实现doc文档转html: SpringBoot集成OpenOffice实现doc文档转html_BADAO_LIUMANG_QIZHI的博客-CSD ...
- vue进阶04-vue文档生成工具vuepress2
介绍 VuePress 是一个以 Markdown 为中心的静态网站生成器.你可以使用 Markdown 来书写内容(如文档.博客等),然后 VuePress 会帮助你生成一个静态网站来展示它们. V ...
- vue插件开发、文档书写、github发布、npm包发布一波流
做vue开发,基本的操作会了之后是不是特想撸一撸vue的插件,让自己的代码可(骚)复(骚)用(的).别急,今天和你一起手摸手,哦呸,是手把手,一起撸一管,哦再呸,是封装一个基于vue的支付宝密码弹窗插 ...
最新文章
- Xshell利用Xftp传输文件,使用pure-ftpd搭建ftp服务
- Boost:基于Boost的HTTP客户端的程序
- 1013 数素数 (20 分)(c语言)
- numpy和pandas的数据乱序
- Bootstrap 排版正文
- 隐藏在华为2019财报里的“数字密码”
- 2016 ECCV论文 《Peak-Piloted Deep Network for Facial Expression Recognition》
- (转载)php flush()刷新不能输出缓冲的原因分析
- 数据库文件和文件组的类别
- 目标检测(Object Detection)
- RAID磁盘阵列总结
- 短文本分类---小白从0到0.3的辛酸历程(上)
- Flutter Sliver系列组件入门
- 中国政府数据开放许可协议(CLOD)研究
- Linux误删文件或程序如何恢复
- HarmonyOS开发详解(四)——鸿蒙Page Ability功能及UI界面开发详解
- 课堂纪律一团糟老师应该怎么办?
- LDA模型中文文本主题提取丨可视化工具pyLDAvis的使用
- 直方图均衡化、规定化、局部直方图、直方图统计
- 洛谷B2075 幂的末尾(解决pow数据爆炸,取后n位,不足补零)
热门文章
- sh ndk-build.cmd command not found
- 52 介绍几个重要的类
- mysql排序1 10 11_MySQL中的排序
- 网页里显示访问的那台服务器,在web服务器中把网页放在那里,才能被访问
- mysql show tables_mysql — show tables的结果不一定准确 | 学步园
- scaling之旅_机器学习算法之旅
- mysql数据库自动转储_mysql数据库数据定时封装转储
- linux服务器性能监控命令汇总之iostat命令(三)
- shell获取指定程序的pid号
- linux sftp远程连接命令