Vue中引入使用 vue-video-player 实现音视频播放

vue-video-player 适用于 Vue 的 video.js 播放器组件。

1. 安装及引入使用

github 地址
npm 地址

安装

npm install vue-video-player --save

全局引入

import VueVideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css';
Vue.use(VueVideoPlayer);

局部引入

import 'video.js/dist/video-js.css';
import { videoPlayer } from 'vue-video-player';export default {components: {videoPlayer}
}

视频播放器配置

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: '',  // 路径type: 'video/mp4'  // 类型}],poster: "", // 封面地址notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖 Video.js 无法播放媒体源时显示的默认信息。controlBar: {timeDivider: true, // 时间分割线durationDisplay: true, // 总时间remainingTimeDisplay: true, // 剩余播放时间progressControl: true, // 进度条 fullscreenToggle: true  // 全屏按钮}
}

2. 组件中使用 vue-video-player

完整代码

<template><div class="videoWrap"><video-player  class="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true":options="playerOptions"@play="onPlayerPlay($event)"@pause="onPlayerPause($event)"@ended="onPlayerEnded($event)"@waiting="onPlayerWaiting($event)"@playing="onPlayerPlaying($event)"@loadeddata="onPlayerLoadeddata($event)"@timeupdate="onPlayerTimeupdate($event)"@canplay="onPlayerCanplay($event)"@canplaythrough="onPlayerCanplaythrough($event)"@statechanged="playerStateChanged($event)"@ready="playerReadied"></video-player></div>
</template><script>
import { videoPlayer } from 'vue-video-player';
import 'video.js/dist/video-js.css';import test from '@/assets/test.mp4';
import img from '@/assets/logo.png'
export default {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: '15:6', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。sources: [],poster: "", // 封面地址notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: true, // 时间分割线durationDisplay: true, // 总时间remainingTimeDisplay: true, // 剩余播放时间progressControl: true, // 进度条 fullscreenToggle: true  // 全屏按钮}}};},computed: {player() {return this.$refs.videoPlayer.player;},},components: {videoPlayer},methods: {/*其实多数是列出的一些回调函数而已，不需要使用的话忽略掉即可*/// 播放回调onPlayerPlay(player) {console.log("player play!", player);},// 暂停回调onPlayerPause(player) {console.log("player pause!", player);},// 视频播完回调onPlayerEnded(player) {console.log("player end!", player);},// DOM元素上的readyState更改导致播放停止onPlayerWaiting(player) {console.log("Player Waiting",player);},// 已开始播放回调onPlayerPlaying(player) {console.log("Player Playing",player);},// 当播放器在当前播放位置下载数据时触发onPlayerLoadeddata(player) {console.log("Player Loadeddata",player);},// 当前播放位置发生变化时触发。onPlayerTimeupdate(player) {console.log("Player Timeupdate",player);},// 媒体的readyState为HAVE_FUTURE_DATA或更高onPlayerCanplay(player) {console.log('player Canplay!', player)},// 媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。onPlayerCanplaythrough(player) {console.log('player Canplaythrough!', player)},//播放状态改变回调playerStateChanged(playerCurrentState) {console.log("player current update state", playerCurrentState);},//将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。playerReadied(player) {console.log("example player 1 readied", player);},},mounted(){this.playerOptions.poster = img;const video = {src: test,  // 路径type: 'video/mp4'  // 类型};this.playerOptions.sources.push(video);console.log(test)}
}
</script><style lang="stylus" scoped>
.videoWrap{width: 100%;height: calc(100vh - 100px);/deep/ video{object-fit: fill; // 消除播放器两边的黑色留白 （object-fit 知识详见下文拓展部分）}/* 视频开始的按钮样式 *//deep/.video-js .vjs-big-play-button{border-width: 3px;border-color: rgb(255, 255, 255);border-style: solid;border-radius: 50%;width: 56px;height: 56px;line-height: 50px;background-color: rgba(0,0,0,0);position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}/* 滚动条的样式 *//deep/.video-js .vjs-control-bar{background-color: rgba(43, 51, 63, 0);}/deep/.video-js .vjs-play-progress{background-color: rgb(238,191,0);}/deep/.video-js .vjs-load-progress div{background-color: rgb(255, 255, 255);}
}
</style>

拓展关于object-fit 属性

定义：
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

属性值：

值	描述
fill	默认值，不保证保持原有的比例，内容拉伸填充整个内容容器。也就是说，元素的内容扩大到完全填充容器的外形尺寸，即使这打破其内在的宽高比。
contain	保持原有尺寸比例。内容被缩放。也就是说，如果你在替换元素上设置一个明确的高度和宽度，此值将导致内容大小，完全在固定的比例显示，但仍在元素尺寸内显示。
cover	保持原有尺寸比例，但部分内容可能被剪切。也就是说，替换元素内容大小保持长宽比，但改变宽度和高度，以便完全覆盖内容元素。
none	保留原有元素内容的长度和宽度，也就是说内容不会被重置。
scale-down	保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
inherit	从该元素的父元素继承属性。

效果

Vue中引入使用 vue-video-player 实现音视频播放相关推荐

Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Sw ...
Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
Vue 中引入markdown富文本编辑器并根据md格式渲染
Vue 中引入markdown富文本编辑器在vue组件中,比较好用的是mavon-editor,github文档地址 https://github.com/hinesboy/mavonEditor ...
Uniapp/Vue中引入使用阿里图标
一.uniapp中引入阿里图标将图标加入购物车部分省略 1.下载阿里图标到本地,uniapp不支持symbol格式 2. 打开下载的压缩包,只需要inconfont.css ,将其放到我们的项目 s ...
Vue中引入并使用动态图标
Vue中引入并使用动态图标 1.安装依赖 2.在Vue项main.js中引入 3.经过以上操作,已经实现全局引入,在任何地方直接使用即可. 本次选用Font-awesome-animation 1.安 ...
vue中引入高德js
项目概述: 通过在vue中引入高德js,实现地图的加载呈现,以及在地图中实现设备坐标定位,并在设备列表点击的同时进行定位点的切换和地图视图的切换,在点击坐标点的时候可以弹出相关介绍信息. 第一步:在i ...
在vue中引入外部的css文件
在vue中引入外部的css文件在项目的src文件下,新建一个style文件夹,存放css文件. 1. 全局引入将外部的css文件放到style文件下,引入外部文件只需在main.js文件中 imp ...
vue中引入全年日历插件calendar.js
针对依赖amazeui的全年日历插件在vue项目中的问题 cnpm i jquery cnpm i amazeui 在当前vue中引入jquery .amazeui及相关css或这全局引入(看其他是否 ...
vue中引入路径的用法
一.Vue文件中引用路径的介绍 1.路径 ./ ./当前文件同级目录 2.路径 -/ -/当前文件上一级目录 3.@符号 @ 的作用是在你引入模块时,可以使用 @ 代替 /src 目录,避免易错的相对 ...
Vue中引入使用 D3.js
Vue中引入使用 D3.js 1. D3.js 学习文档 D3.js 中文网 D3.js 入门教程 D3.js v5版入门教程 d3.js API中文手册-[看云] d3.layout (布局)-[ ...

Vue中引入使用 vue-video-player 实现音视频播放

1. 安装及引入使用

2. 组件中使用 vue-video-player

完整代码

拓展关于object-fit 属性

效果

Vue中引入使用 vue-video-player 实现音视频播放相关推荐

最新文章

热门文章

Vue中 引入使用 vue-video-player 实现音视频播放

1. 安装及引入使用

2. 组件中使用 vue-video-player

完整代码

拓展 关于object-fit 属性

效果

Vue中 引入使用 vue-video-player 实现音视频播放相关推荐

最新文章

热门文章

Vue中引入使用 vue-video-player 实现音视频播放

拓展关于object-fit 属性

Vue中引入使用 vue-video-player 实现音视频播放相关推荐