vue中使用video-js预览视频(结合vuetify)
后台管理中经常会有一些视频上传的需求,在列表中,往往需要用到视频预览
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,//全屏按钮 }, },