VUE- 引用视频组件
VUE- 引用视频组件
安装依赖
cnpm install vue-video-player -S cnpm install video.js -S
全局引用: 在main.js中
import VuevideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css'; Vue.use(VuevideoPlayer);
或组件内引用:
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
components: {
videoPlayer
}
}
界面部分
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
>
</video-player>
样式表,设置播放按钮的形状与位置:
.video-js .vjs-big-play-button{}
data 部分
data() {
return {
playerOptions: {
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: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
sources: [
{
// src: "//path/to/video.mp4", // 路径
src: "src/images/VID1121.mp4", // 路径
type: "video/mp4" // 类型
},
{
src: "//path/to/video.webm",
type: "video/webm"
}
],
// poster: "../../static/images/test.jpg", //你的封面地址
poster: "src/images/logo.png", //你的封面地址 // width: document.documentElement.clientWidth,
notSupportedMessage: "此视频暂无法播放,请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
}
}
};
},
引用:https://www.jianshu.com/p/e8e747e33ef0
VUE- 引用视频组件的更多相关文章
- vue 引用其他组件
1.在components 目录下新建Test.vue 文件 <template> <div class="test"> <h1>{{ msg ...
- vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题
1.创建组件components > uploadImg > index.vue <template> <input type="file" name ...
- Vue引用其他组件,但组件某些部分不需要时的简单处理
项目开发时,我们会把多个地方重复使用的模块抽象成组件,提供给大家一起使用,但是使用组件的时候偶尔会遇见一些问题,比如说组件里只有某些东西自己并不需要,这个时候我们可以对组件进行简单的修改,而不影响其他 ...
- vue组件,可以通过npm引用的组件
本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用. 功能说明 多层弹出时,只有一个背景层. 弹出层嵌入内部组件. 弹出层按钮支持回调 源码下载 ...
- vue项目引用 iView 组件——全局安装与按需加载
框架的热度,出现了不少基于Vue的UI组件库,这次项目用到了 iView 这个组件库.使用方法官网很详细. 官网:https://www.iviewui.com/ 这篇文章主要是记录一下npm 全局安 ...
- vue父组件引用子组件方法显示undefined问题原因及解决方法
关于vue父组件引用子组件问题 1.首先导入子组件并且在components中定义子组件 2.引用子组件,并定义ref,ref定义的名称用于 this.$refs所调用的名称 3.调用子组件的方法 ( ...
- vue学习【一】vue引用封装echarts并展示多个echarts图表
大家好,我是一叶,经过一段时间对vue的学习,我打算把vue做一个系列,把踩过的坑和大家分享一下. 现在开始第一章:vue引用并封装echarts 在文章开始前,我先舔波echarts(真香).阿里的 ...
- Vue.js多重组件嵌套
Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...
- 基于Vue封装分页组件
使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...
随机推荐
- mitmproxy 配置
pip install mitmproxy Man In The Middle 原理 mitmproxy工程工具包,主要包含了3个组件 功能一致,交互界面不同 mitmproxy:命令行界面,wind ...
- Webstorm常用快捷键备忘
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaSscript IDE ...
- NoSql相关
1 NoSQL, No Problem: An Intro to NoSQL Databases https://www.thoughtworks.com/insights/blog/nosql-n ...
- pyhton输出表格数据出现省略号?(教你很快解决)
//2019.07.18 pandas是python提供的非常好用的数据分析模块,但是在使用pandas进行数据分析时,有时候需要查看打印的结果,当dataframe行数或者列数比较多的时候,打印结果 ...
- spring boot 接口service有多个实现类
接口.java public interface DeService { } 接口实现类1.java @Service("ud")public class DeServiceImp ...
- Java 日期与时间
章节 Java 基础 Java 简介 Java 环境搭建 Java 基本语法 Java 注释 Java 变量 Java 数据类型 Java 字符串 Java 类型转换 Java 运算符 Java 字符 ...
- MongoDB_04_插入和查询
案列需求: 存在文章评论的数据存放到MongoDB中,数据结构参考如下: 数据库:articledb 专栏文章评论 comment / / 字段名称 字段含义 字段类型 备注 _id ID Objec ...
- c#实现"扫描检测硬件改动"
public static class Win32Api { public const int CM_LOCATE_DEVNODE_NORMAL = 0x00000000; public const ...
- mjpg-streamer视频服务器移植
相关软件下载地址:http://pan.baidu.com/s/16yo8Y JPEG库的移植 对于内核linux-2.6.35,不能再使用servfox,如果要使用的需要修改大量的代码.在此选用新的 ...
- 【踩坑记录】记录一次使用Python logging库多进程打印日志的填坑过程
背景: 项目使用Python自带的logging库来打印日志 项目部署在一台Centos7的机器上 项目采用gunicorn多进程部署 过程: 1.LOG日志代码封装: 采用logging库,并设置w ...