На основе Vue — лёгкий компонент для воспроизведения видео, подходит для ПК и мобильных устройств
$ 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)
В проекте используется vueMiniPlayer:
<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>
Лёгкий HTML5-плеер с изящным пользовательским интерфейсом, прост в использовании.
Предоставляет глобальные компоненты для установки через npm.
Поддерживает различные форматы видео, работает на мобильных устройствах и ПК.
Название | Значение по умолчанию | Тип | Описание |
---|---|---|---|
video | - | - | Видеопараметры |
mutex | false | Boolean | Взаимоисключающий, останавливает другие проигрыватели при воспроизведении текущего |
video.url | - | String,Array | Источник видео, поддерживает передачу нескольких форматов видео в виде массива |
video.cover | - | String | Обложка видео |
video.muted | false | Boolean | Воспроизведение без звука |
video.loop | false | Boolean | Повторное воспроизведение видео |
video.preload | 'auto' | String | Предварительная загрузка видео, возможные значения: 'none', 'metadata', 'auto' |
video.poster | - | String | Исходная обложка видео по умолчанию не задана, только настройка video.cover |
video.volume | 1 | String,Number | Громкость по умолчанию |
video.autoplay | false | Boolean | Автоматическое воспроизведение видео |
video.playsinline | false | Boolean | Встроенное воспроизведение видео |
video.crossOrigin | false | String | Источник видео corss, возможные значения: 'anonymous', 'use-credentials' |
video.logo | - | String | Логотип проигрывателя |
video.logoStyle | - | Object,String | Стиль логотипа проигрывателя, формат параметров {color:'#fff'} или "color:#fff" |
Название | Описание |
---|---|
fullscreen | Событие полноэкранного режима |
ready | Подготовка к воспроизведению видео |
clearMode | Выполнение режима очистки |
videoPlay | Событие воспроизведения или паузы проигрывателя |
created | Жизненный цикл компонента |
mounted | Жизненный цикл компонента |
beforeDestroy | Жизненный цикл компонента |
destroyed | Жизненный цикл компонента |
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )