一、概述
基於 Vue 的一個輕量級視頻播放組件,適配 PC 和移動端。
官方鏈接:https://webweifeng.github.io/vue-mini-player/
特色
1.輕量級 HTML5
播放器,精美 UI
控件,簡單易上手
2.提供以 npm
的形式安裝提供全局組件
3.多格式視頻配置,移動端+PC 通用模式
- 多類型視頻支持
- 自定義海報
- 多平臺兼容
- 靜音開關
- 播放時間進度
- 全屏支持
- 拖動播放
- 倍速播放
- MSE 支持
- 彈幕支持
二、安裝
npm install vue-mini-player -S
三、使用
test.vue
<template> <div style="width: 500px;height: 300px"> <vueMiniPlayer ref="vueMiniPlayer" :video="video" :mutex="true" @fullscreen="handleFullscreen" /> </div> </template> <script> import Vue from 'vue' import vueMiniPlayer from 'vue-mini-player' import 'vue-mini-player/lib/vue-mini-player.css' Vue.use(vueMiniPlayer) 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>
一般情況下,不需要設置視頻海報,默認會顯示視頻的第一幀。
效果如下: