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- 引用视频组件的更多相关文章

  1. vue 引用其他组件

    1.在components 目录下新建Test.vue 文件 <template> <div class="test"> <h1>{{ msg ...

  2. vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题

    1.创建组件components > uploadImg > index.vue <template> <input type="file" name ...

  3. Vue引用其他组件,但组件某些部分不需要时的简单处理

    项目开发时,我们会把多个地方重复使用的模块抽象成组件,提供给大家一起使用,但是使用组件的时候偶尔会遇见一些问题,比如说组件里只有某些东西自己并不需要,这个时候我们可以对组件进行简单的修改,而不影响其他 ...

  4. vue组件,可以通过npm引用的组件

    本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用. 功能说明 多层弹出时,只有一个背景层. 弹出层嵌入内部组件. 弹出层按钮支持回调 源码下载 ...

  5. vue项目引用 iView 组件——全局安装与按需加载

    框架的热度,出现了不少基于Vue的UI组件库,这次项目用到了 iView 这个组件库.使用方法官网很详细. 官网:https://www.iviewui.com/ 这篇文章主要是记录一下npm 全局安 ...

  6. vue父组件引用子组件方法显示undefined问题原因及解决方法

    关于vue父组件引用子组件问题 1.首先导入子组件并且在components中定义子组件 2.引用子组件,并定义ref,ref定义的名称用于 this.$refs所调用的名称 3.调用子组件的方法 ( ...

  7. vue学习【一】vue引用封装echarts并展示多个echarts图表

    大家好,我是一叶,经过一段时间对vue的学习,我打算把vue做一个系列,把踩过的坑和大家分享一下. 现在开始第一章:vue引用并封装echarts 在文章开始前,我先舔波echarts(真香).阿里的 ...

  8. Vue.js多重组件嵌套

    Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...

  9. 基于Vue封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...

随机推荐

  1. mitmproxy 配置

    pip install mitmproxy Man In The Middle 原理 mitmproxy工程工具包,主要包含了3个组件 功能一致,交互界面不同 mitmproxy:命令行界面,wind ...

  2. Webstorm常用快捷键备忘

    WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaSscript IDE ...

  3. NoSql相关

    1  NoSQL, No Problem: An Intro to NoSQL Databases https://www.thoughtworks.com/insights/blog/nosql-n ...

  4. pyhton输出表格数据出现省略号?(教你很快解决)

    //2019.07.18 pandas是python提供的非常好用的数据分析模块,但是在使用pandas进行数据分析时,有时候需要查看打印的结果,当dataframe行数或者列数比较多的时候,打印结果 ...

  5. spring boot 接口service有多个实现类

    接口.java public interface DeService { } 接口实现类1.java @Service("ud")public class DeServiceImp ...

  6. Java 日期与时间

    章节 Java 基础 Java 简介 Java 环境搭建 Java 基本语法 Java 注释 Java 变量 Java 数据类型 Java 字符串 Java 类型转换 Java 运算符 Java 字符 ...

  7. MongoDB_04_插入和查询

    案列需求: 存在文章评论的数据存放到MongoDB中,数据结构参考如下: 数据库:articledb 专栏文章评论 comment / / 字段名称 字段含义 字段类型 备注 _id ID Objec ...

  8. c#实现"扫描检测硬件改动"

    public static class Win32Api { public const int CM_LOCATE_DEVNODE_NORMAL = 0x00000000; public const ...

  9. mjpg-streamer视频服务器移植

    相关软件下载地址:http://pan.baidu.com/s/16yo8Y JPEG库的移植 对于内核linux-2.6.35,不能再使用servfox,如果要使用的需要修改大量的代码.在此选用新的 ...

  10. 【踩坑记录】记录一次使用Python logging库多进程打印日志的填坑过程

    背景: 项目使用Python自带的logging库来打印日志 项目部署在一台Centos7的机器上 项目采用gunicorn多进程部署 过程: 1.LOG日志代码封装: 采用logging库,并设置w ...