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

最新推荐文章于 2026-04-04 12:54:10 发布

原创最新推荐文章于 2026-04-04 12:54:10 发布 · 8.4k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

vue 同时被 2 个专栏收录

8 篇文章

订阅专栏

视频播放器

1 篇文章

订阅专栏

介绍了一款基于Vue的轻量级视频播放组件vue-mini-player，该组件适用于PC和移动端，提供了丰富的API和配置选项，如视频源、封面、静音、循环播放等，并附带了详细的使用教程。

基于 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() {}
    },

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