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. python反序列化漏洞

    原理在网页源码中如果出现将用户输入数据进行反序列化当成参数输出时,出现漏洞,可造成任意命令执行例如网页源码try:       become = self.get_argument('become') ...

  2. 请求接口得到一段markdowm遇到的问题

    如图,在console里看得到这段数据 有<br>之类的东东,但是我们用部分富文本解析工具可能会显示不了回车,所以我们可以自己动手: 主要就是利用js的replace方法来把<br& ...

  3. leetcode1042 Flower Planting With No Adjacent

    """ You have N gardens, labelled 1 to N. In each garden, you want to plant one of 4 t ...

  4. php中date('Y/m/d',time())显示不对

    一. 时间不对是因为没设置时区 在xampp/php/php.ini中ctrl + f 查找date.timezone 该行默认注释,去掉 ; 修改为 date.timezone = PRC 二 上述 ...

  5. Redis混合存储-冷热数据识别与交换

    Redis混合存储产品是阿里云自主研发的完全兼容Redis协议和特性的混合存储产品. 通过将部分冷数据存储到磁盘,在保证绝大部分访问性能不下降的基础上,大大降低了用户成本并突破了内存对Redis单实例 ...

  6. java 立方变自身

    立方变自身 观察下面的现象,某个数字的立方,按位累加仍然等于自身. 1^3 = 1 8^3 = 512 5+1+2=8 17^3 = 4913 4+9+1+3=17 - 请你计算包括1,8,17在内, ...

  7. POJ 3916:Duplicate Removal 将相近的重复元素删除

    Duplicate Removal Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 1745   Accepted: 1213 ...

  8. Live555 的一个缺陷–例子不能支持多线程(已经修改成支持多线程)

    我对Live555进行了一次封装,但是Live555 是单线程的,里面定义的全局变量太多,我封装好dll库后,在客户端调用,因为多个对话框中要使用码流,我就定义了多个对象从设备端接收码流,建立多个连接 ...

  9. 054-for循环

    <?php for($i=1;$i<=5;$i++){ echo "$i<br />"; //循环体 } ?>

  10. java枚举类(转)

    转自: http://blog.sina.com.cn/s/blog_697b968901013ih1.html 这里主要讲解的是Java的枚举类型 什么是枚举? 以我的理解答:枚举是我们自己定义的一 ...