码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-07-30 14:07:27      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:mp4   mdi   uid   安装   poi   src   asp   false   --   

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

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)

标签:mp4   mdi   uid   安装   poi   src   asp   false   --   

原文地址:https://www.cnblogs.com/bingchenzhilu/p/13366326.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!