vue中使用video-js预览视频(结合vuetify)

vue

后台管理中经常会有一些视频上传的需求,在列表中,往往需要用到视频预览

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,//全屏按钮

},

},

以上是 vue中使用video-js预览视频(结合vuetify) 的全部内容, 来源链接: utcz.com/z/378427.html

回到顶部