vue 视频上传el-upload

56 阅读 0 评论 37 点赞

我是靠谱客的博主甜美悟空，最近开发中收集的这篇文章主要介绍vue 视频上传el-upload，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、视频上传

网页代码：

<el-form-item label="视频上传" prop="Videourl">
<!-- action必选参数, 上传的地址 -->
<el-upload class="avatar-uploader el-upload--text" :action="uploadUrl" :show-file-list="false" :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo" :on-progress="uploadVideoProcess">
<video v-if="dataForm.videoUrl!='' && videoFlag == false" :src=" dataForm.videoUrl" class="avatar" controls="controls">您的浏览器不支持视频播放</video>
<i v-else-if=" dataForm.videoUrl=='' && videoFlag == false" class="el-icon-plus avatar-uploader-icon"></i>
<el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
</el-upload>

data：

uploadUrl:"",//
     videoFlag:false , //是否显示进度条
     videoUploadPercent:"", //进度条的进度，
     isShowUploadVideo:false, //

方法：

beforeUploadVideo(file) {
const isLt10M = file.size / 1024 / 1024 < 300;
if (['video/mp4','video/flv','video/avi','video/wmv'].indexOf(file.type) == -1) {
this.$message.error('请上传正确的视频格式');
return false;
}
if (!isLt10M) {
this.$message.error('上传视频大小不能超过300MB哦!');
return false;
}
},
   //进度条
  uploadVideoProcess(event, file, fileList){
this.videoFlag = true;
this.videoUploadPercent = file.percentage.toFixed(0);
},
handleVideoSuccess(res, file) {
//获取上传图片地址
this.videoFlag = false;
this.videoUploadPercent = 0;
if(res.code == 0){
this.dataForm.videoUrl= res.url;
}else{
this.$message.error('视频上传失败，请重新上传！');
}
},

样式：

<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
.video-avatar {
width: 400px;
height: 200px;
}
</style>

二、视频播放

需要用视频播放插件参考网址：https://www.jianshu.com/p/532fc1d8c90c

main.js

import VideoPlayer from 'vue-video-player'
require('vue-video-player/src/custom-theme.css')
require('vue-video-player/node_modules/video.js/dist/video-js.css')
Vue.use(VideoPlayer)

在页面中引用

<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" >
</video-player>

点击查看视频按钮，弹出对话框展示视频

使用莫泰对话框和视频播放插件

data：

dialogVisible2:false,

页面代码：

 莫泰对话框代码
<el-dialog
title="视频"
:visible.sync="dialogVisible2"
width="30%"
:before-close="handleClose">
<!-- <video :src="videoUrl" class="avatar" controls="controls">您的浏览器不支持视频播放</video> -->
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" >
</video-player>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible2 = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
</span>
</el-dialog>

data：

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: [{
type:'',//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
src: '' //url地址
}],
poster: '', //你的封面地址 // width: document.documentElement.clientWidth, //播放器宽度
notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar:{
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
}
},

方法：


<template slot-scope="scope">
<el-button type="text" size="small" @click="lookvideoinfo(scope.row.videoUrl)">查看视频</el-button>
<el-button type="text" size="small" @click="lookDescription(scope.row.description)">查看简介</el-button>
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
</template>

fieldValue()
{
this.playerOptions.sources[0].src=this.videourl;
this.playerOptions.poster = this.imgs;
// alert(this.videourl)
this.dialogVisible2=true
},
点击查看视频触发的方法
lookvideoinfo(val)
{
this.videourl=null
this.videourl=val
this.fieldValue()
},

样式：

<style>
.avatar {
width: 178px;
height: 178px;
display: block;
}
.video-js .vjs-icon-placeholder {
width: 100%;
height: 100%;
display: block;
}
</style>