vue-mini-player vue视频播放组件

最新推荐文章于 2024-09-16 07:13:58 发布

七色花·

最新推荐文章于 2024-09-16 07:13:58 发布

阅读量8.2k

点赞数 2

分类专栏： vue 视频播放器文章标签： vue.js

本文链接：https://blog.csdn.net/jiang480630/article/details/106947803

版权

vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

视频播放器

1 篇文章 0 订阅

订阅专栏

基于 Vue 的一个轻量级视频播放组件，适配 PC 和移动端

vue-mini-player使用方法：

安装

npm install vue-mini-player -S

// main.js
import vueMiniPlayer from 'vue-mini-player'
import 'vue-mini-player/lib/vue-mini-player.css'
Vue.use(vueMiniPlayer)

// html部分

 <vueMiniPlayer
 	  ref="vueMiniPlayer"
      :video="video"
      :mutex="true"
      @fullscreen="handleFullscreen"
  />

// js部分

data() {
        return {
            video: {
                url: "http://47.105.206.28/videos/wangkun.mp4",
                cover: "https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png",
                muted: false,
                loop: false,
                preload: "auto",
                poster: "",
                volume: 1,
                autoplay: false
            }
        };
    },
      computed: {
        $video() {
            return this.$refs.vueMiniPlayer.$video;
        }
    },
     methods: {
        handleFullscreen() {}
    },

效果图如下：
在这里插入图片描述