具体实现：

一、安装video-player组件：

1、安装组件：

npm i vue-video-player --save

2、main.js文件全局注册组件：

// 视频组件，全局注册
import VideoPlayer from 'vue-video-player/src';
import 'vue-video-player/src/custom-theme.css';
import 'video.js/dist/video-js.css';
Vue.use(VideoPlayer);

二、配置video-player公共组件：

注意，本组件设置的属性为一加载就播放，使用时可按自己情况酌情修改；

<template><div class="video"><!-- 使用组件增加loading，优化视频播放缓慢问题--><video-player class="video-player"ref="videoPlayer"v-loading="loading"element-loading-background="rgb(0,0,0)":playsinline="true":options="playerOptions"></video-player></div>
</template>

export default {props: {mp4Url: {type: String,// default: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4'default: ''},mp4Pic: {type: String,// default: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png'default: ''},// fileAreaHeight: {//   type: Number,//   default: 500// },fileType: {type: String,default: 'mp4' // 资源的类型}},computed: { // 使用计算属性playerOptions () {const playerOptionsObj = {playbackRates: [0.5, 1.0, 1.5, 2.0], // 视频播放速度autoplay: true, // 如果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: [{type: 'video/' + this.fileType,   // 资源格式写法：'video/mp4'，否则控制台会出现notSupportedMessage设置的错误。src: this.mp4Url // 视频url地址}],poster: this.mp4Pic, // 视频封面地址// width: document.documentElement.clientWidth,// height: this.fileAreaHeight,   // 设置高度，fluid需要设置成flasenotSupportedMessage: '此视频暂无法播放...', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {// timeDivider: true,durationDisplay: true,remainingTimeDisplay: false,fullscreenToggle: true  //全屏按钮}}return playerOptionsObj;}},data() {return {loading: true};},mounted() {this.$refs.videoPlayer.$refs.video.addEventListener('loadeddata', e => {console.log('提示视频的元数据已加载')console.log(e)this.loading = false;})},methods: {loadstart(e) {console.log('提示视频的元数据已加载', e)}},
};

::v-deep {.video-js {.vjs-big-play-button {width: 1.5em;border-radius: 50%;top: 50%;left: 50%;transform: translate(-50%, -50%);border: none;}.vjs-play-progress:before {font-size: 1em;top: 50%;transform: translateY(-50%);}.vjs-slider-horizontal .vjs-volume-level:before {top: 50%;transform: translateY(-50%);}}
}

三、应用video-player组件：

注意，这里额外配置一次path地址，目的为优化页面中多个视频同时加载问题；
noVideo可自行配置样式，应与视频加载后的样式保持一致，优化体验感，对未加载的视频组件进行占空处理；
实际应用中可去除此判断外壳，直接引入组件并配置path属性；

<Videoplayer v-if="newPath" :mp4Url="newPath"></Videoplayer>
<div class="noVideo" v-else><div class="videoIcon" @click="isPlay(index, ind)"></div>
</div>

import Videoplayer from '@/components/Videoplayer'; // 引入上面创建的组件
export default {components: { Videoplayer },data() {return {loading: true,path: '', // 视频地址newPath: null}},methods: {// 播放视频isPlay(index, ind) {this.newPath = this.path;}}
}

.box {width: 300px;// margin: 0 15px 15px 0;.noVideo {height: calc(300px * 9 / 16);  // 这里主要为9：16的样式计算display: flex;align-items: center;justify-content: center;background: #000;.videoIcon {width: 45px;height: 45px;border-radius: 50%;background: rgba(43, 51, 63, 0.7);display: flex;align-items: center;justify-content: center;cursor: pointer;color: #fff;font-size: 30px;&::before {content: "\F101";font-family: VideoJS;font-weight: normal;font-style: normal;}}&:hover .videoIcon {background: rgba(115, 133, 159, 0.5)}}
}

vue+video-player组件应用相关推荐

Unity流水账2：视频播放之Video Player
VideoPlayer组件使用VideoPlayer组件可以将视频文件附加到GameObjecs,并在运行时,在GameObject的Texture上播放它们. 默认情况下,Video Pl ...
VR视频播放器Video Player
一.通过blender进行建模 1.下载并进行安装快捷键: ①A:全选 ②X:把场景中所有的组件都删掉,按下X后点击Delete X ,则场景会被清空 ③Shift+A:生成一个物体或 ...
Vue实现视频播放列表（二）——video.js组件的使用-实现视频播放列表-切换播放
Vue实现视频播放列表--video.js组件的使用-实现视频播放列表-切换播放 1.video标签--https://www.runoob.com/html/html-videos.html 2.v ...
Vue实现视频播放列表（一）——video.js组件的使用
Vue实现视频播放列表(一)--video.js组件的使用 video.js组件官网--https://www.npmjs.com/package/video.js 1.安装引入video.js组件 ...
Vue中视频组件vue-video-player
实现效果如图: 在页面中展示,可放大至全屏 1.安装 (因为最新版本有问题我现在安装的版本是npm install vue-video-player@5.0.1 --save) npm insta ...
Vue3封装Video.js组件(基于video.js)
Vue3封装Video.js组件话不多说直接上代码在项目中安装Video.js 通过npm安装video.js npm install video.js --save Video.js组件的封装 ...
html angular video视频组件
html angular video视频组件官方网站项目地址博主提供的下载地址文档地址 Videogular Videogular is an HTML5 video player for A ...
Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）
文章目录 1. Vue+Video.js播放效果图 2. npm安装和引入 3. vue 使用 4. 动态设置video视频的src地址 5. Uncaught (in promise) TypeEr ...
使用Raw Image和Unity自带的视频播放插件Video Player
使用Raw Image和Unity自带的视频播放插件Video Player导致视频不清晰先创建Raw Image 在Raw Image身上添加Video Player和Audio Source组件 ...
视频列表html页面,vue + video.js实现视频列表页（多个视频）
vue + video.js实现视频列表页 vue项目中做一个视频列表页,本来用原生video标签来实现,由于考虑到手机浏览器兼容问题,找了很多插件,最后决定用video.js这个插件来实现.Vide ...

vue+video-player组件应用

vue+video-player组件应用

具体实现：

一、安装video-player组件：

二、配置video-player公共组件：

三、应用video-player组件：

vue+video-player组件应用相关推荐

最新文章

热门文章