vue设置video图片_vue-video-player视频播放器使用配置详解

本文实例为大家分享了vue-video-player视频播放器的使用配置，供大家参考，具体内容如下

1、安装

npm install vue-video-player -save

2、在main.js中添加

import VueVideoPlayer from 'vue-video-player' // 视频播放器

import 'video.js/dist/video-js.css'

Vue.use(VueVideoPlayer)

3、新建一个vueVideoPlayer.vue组件供调用

export default {

name: 'vueVideoPlayer',

props: {

src: {

type: String

cover_url: {

type: String

}

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:10', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")

fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。

sources: [{

src: this.src, // 路径

type: 'video/mp4' // 类型

}],

poster: this.cover_url, // 你的封面地址

// width: document.documentElement.clientWidth,

notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。

controlBar: {

timeDivider: true,

durationDisplay: true,

remainingTimeDisplay: false,

fullscreenToggle: true // 全屏按钮

}

4、在其他组件调用

import vueVideoPlayer from './module/vueVideoPlayer'

// 不要忘记注册

components： {

vueVideoPlayer

}

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

vue设置video图片_vue-video-player视频播放器使用配置详解相关推荐

Vue 设置背景图片样式
Vue 设置背景图片样式 CSS 效果图 CSS <style> body{background-image: url('./bg.jpg');background-size: cover ...
mysql innodb 设置详解_【mysql】mysql innodb 配置详解
MySQLinnodb 配置详解 innodb_buffer_pool_size:这是InnoDB最重要的设置,对InnoDB性能有决定性的影响.默认的设置只有8M,所以默认的数据库设置下面InnoD ...
html图片标签img的介绍以及基本用法详解
<img> 元素向网页中嵌入一幅图像.<img> 标签有两个必需的属性:src 属性和 alt 属性. 必需的属性属性值描述 alt text 规定图像的替代文本. s ...
服务器系统raid设置,服务器RAID配置详解
<服务器RAID配置详解>由会员分享,可在线阅读,更多相关<服务器RAID配置详解(17页珍藏版)>请在人人文库网上搜索. 1.Ctrl+H的,这个主服务器RAID配置详解 ...
服务器文件共享不同用户互访设置,samba配置_samba文件共享服务配置详解
摘要腾兴网为您分享:samba文件共享服务配置详解,之了课堂,央视影音,人人理财,平安证券等软件知识,以及游戏通用窗口化工具,福建省校讯通,净天之命1.71,teamviewer安卓,宝贝听听,手机 ...
vue中使用ECharts实现中国地图配置详解（配官方配置地址）
前言: 1.实现自定义左下角的视觉映射组件(包括自定义颜色.文字.图元大小) 2.实现自定义悬浮提示框如下图所示: 实现步骤: 一.在vue中安装echarts 1.npm install echa ...
Mine Video Player – 视频播放器WordPress插件
介绍: 轻松实现视频在wp页面播放,支持剧集列表,支持多组视频来源,这款视频播放器WordPress插件支持m3u8/mp4等网页视频格式,同时支持直播源,也可将主流视频站的视频通过第三方程序来播放, ...
vue样式引入图片_vue怎么插入图片？
vue怎么插入图片?下面本篇文章给大家介绍一下在vue中插入图片的几种方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue怎么插入图片? 首先给图片地址绑定变量在scrip ...
vue项目中使用代码编辑器，视频播放器插件
1.Vue-代码编辑器插件 1)安装 npm install monaco-editor --save npm install monaco-editor-webpack-plugin --save- ...

vue设置video图片_vue-video-player视频播放器使用配置详解

vue设置video图片_vue-video-player视频播放器使用配置详解相关推荐

最新文章

热门文章