vue中使用video-js预览视频（结合vuetify）

2021-01-15 01:12

阅读：1083

标签：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）

  ----点击预览按钮后的弹框
      @click="videoModal=false" 
        style="font-size:30px;position: absolute;top:-15px;right:-15px;z-index:2;cursor:pointer;"
      >mdi-close-circle-outline-----------点击关闭按钮关闭遮罩层
      
        设置视频播放的对象
        >

 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

上一篇：ASP.NET MVC 表单提交多层子级实体集合数据到控制器中

下一篇：如何将多容器pod部署到Kubernetes集群

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：vue中使用video-js预览视频（结合vuetify）
文章链接：http://soscw.com/index.php/essay/42027.html

亲，登录后才可以留言！

vue中使用video-js预览视频（结合vuetify）

评论

热门文章

推荐文章

最新文章

置顶文章