后台管理中经常会有一些视频上传的需求，在列表中，往往需要用到视频预览
1：安装
yarn add vue-video-player
2：引用：在main.js中引用
import VideoPlayer from ‘vue-video-player‘
require(‘video.js/dist/video-js.css‘)
require(‘vue-video-player/src/custom-theme.css‘)
Vue.use(VideoPlayer)
3：使用（结合你使用框架的dialog即对话框，我使用的是vuetify中的遮罩层，效果一致，便没有使用dialog）
<v-overlay :absolute="false" :value="videoModal">----点击预览按钮后的弹框 <v-icon @click="videoModal=false" style="font-size:30px;position: absolute;top:-15px;right:-15px;z-index:2;cursor:pointer;" >mdi-close-circle-outline</v-icon>-----------点击关闭按钮关闭遮罩层 <div class="input_video"> <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"--------设置视频播放的对象 ></video-player> </div> </v-overlay>
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0],//倍速控制
autoplay: true,//是否自动播放
muted: false,//是否静音播放
loop: false,//是否循环播放
preload: "auto",
language: "zh-CN",
aspectRatio: "16:9",//比例
fluid: true,
sources: [
{
type: "",
src:
"https://blz-videos.nosdn.127.net/1/OverWatch/OVR_D.VA_SHOOTING_STAR_zhCN_YT_PC_3.mp4", //url地址
},
],
poster: "", //你的封面地址
notSupportedMessage: "此视频暂无法播放，请稍后再试",
controlBar: {
timeDivider: true,
durationDisplay: true,//剩余时间是否显示
remainingTimeDisplay: true,//剩余时间是否显示，有一个即可
fullscreenToggle: true,//全屏按钮
},
},