vue 如何实现视频功能

用心去追梦

于 2022-05-09 23:31:59 发布

阅读量1.2k

点赞数

分类专栏： vue 前端文章标签： vue.js 音视频 javascript

本文链接：https://blog.csdn.net/qq_33240556/article/details/124678150

版权

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

vue

10 篇文章 0 订阅

订阅专栏

1.安装

$ npm install vue-mini-player -S

2.引入

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

3.使用

<template>
  <vueMiniPlayer ref="vueMiniPlayer" :video="video" :mutex="true" @fullscreen="handleFullscreen" />
</template>
<script>
  export default {
    data () {
      return {
        video: {
            url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.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(){

      }
    }
  }
</script>