Vue-AliPlayer
Vue 2.x видеоплеер на основе vue-aliplayer.
npm install vue-aliplayer -S
import VueAliplayer from 'vue-aliplayer'
export default {
components: {
'ali-player': VueAliplayer
}
}
Название | Тип | Значение по умолчанию | Описание |
---|---|---|---|
aliplayerSdkPath | String | //g.alicdn.com/de/prismplayer/2.5.0/aliplayer-min.js | Ссылка на проигрыватель Ali |
playStyle | String | Стиль плеера | |
source | String | Адрес для воспроизведения видео: 1. Отдельный URL; 2. Состояние по умолчанию, означает использование «vi + playauth», приоритет воспроизведения наивысший | |
vid | String | Идентификатор медиаконтента в службе кодирования | |
playauth | String | Права на воспроизведение, как их получить, см.: получение playauth | |
height | String | 100% | Высота проигрывателя, может быть выражена как «100 %» или «100 px» |
width | String | 320px | Ширина проигрывателя, может быть выражена как «100 %» или «100 px» |
cover | String | Изображение обложки проигрывателя по умолчанию, укажите правильный адрес изображения. Для обложки Flash-проигрывателя также необходимо разрешить междоменный доступ | |
isLive | Boolean | false | Является ли контент прямым эфиром, прямой эфир не позволяет пользователям перетаскивать индикатор выполнения |
autoplay | Boolean | false | Будет ли проигрыватель воспроизводиться автоматически, атрибут autoplay не действует на мобильных устройствах |
useH5Prism | Boolean | false | Указывает на использование H5-плеера |
useFlashPrism | Boolean | false | Указывает на использование Flash-плеера |
playsinline | Boolean | false | Воспроизводить ли H5 встроенным образом, некоторые браузеры Android не работают |
format | String | mp4 | Формат адреса воспроизведения, только когда используется vid + plauth, можно выбрать значение «mp4» и «m3u8», по умолчанию — «mp4» |
x5_type | String | 'auto' | Объявить о включении одноуровневого H5-плеера, установить значение «h5» при включении, см. Одноуровневый проигрыватель |
x5_fullscreen | Boolean | false | Объявляет, будет ли видео воспроизводиться в полноэкранном режиме TBS, по умолчанию — false, см. Одноуровневый проигрыватель |
x5_video_position | String | center | Объявляет положение видео на экране, по умолчанию «center», можно выбрать «top» или «center», см. Одноуровневый проигрыватель |
x5_orientation | String | Объявляет поддерживаемые направления TBS-плеера, можно выбрать: landscape (горизонтальный), portrait (вертикальный), landscape | |
autoPlayDelay | Number | Время задержки воспроизведения, единица измерения — секунды, см. Задержка воспроизведения | |
autoPlayDelayDisplayText | String | Текст подсказки для задержки воспроизведения, см. Задержка воспроизведения |
Метод | Параметр | Описание |
---|---|---|
play | none | Воспроизведение видео |
pause | none | Приостановка видео |
replay | none | Повторное воспроизведение видео |
seek | time | Переход к определённому моменту времени для воспроизведения, время выражается в секундах |
getCurrentTime | none | Получить текущее время воспроизведения, результат выражается в секундах |
getDuration | none | Получить общую продолжительность видео, результат выражается в секундах |
getVolume | none | Получить текущий уровень громкости, возвращаемое значение находится в диапазоне от 0 до 1, ios и некоторые версии android не работают |
setVolume | vol | Установить громкость, vol находится в диапазоне от 0 до 1, ios и некоторые версии android не работают |
loadByUrl | url,time | Непосредственное воспроизведение видео по URL, time является необязательным значением (единица измерения — секунда), в настоящее время поддерживается только переключение между форматами одного типа (mp4/flv/m3u8), переключение между потоками прямого эфира rtmp не поддерживается |
reloaduserPlayInfoAndVidRequestMts | vid: идентификатор видео, playauth: права на воспроизведение | В настоящее время поддерживает только функцию перезагрузки на HTML5, переключение между m3u8 и потоками прямого эфира rtmp не поддерживается, переключение между mp4 и flv поддерживается |
setPlayerSize | w,h | Установить размер проигрывателя, w и h могут быть 400 пикселей или 60 % |
setSpeed | speed | Установить скорость воспроизведения, возможно, не работает на мобильных устройствах, например, android в WeChat |
Событие | Параметр | Описание |
---|---|---|
ready | none | Срабатывает, когда проигрыватель готов |
play | none | Срабатывает при запуске воспроизведения |
pause | none | Срабатывает при приостановке воспроизведения |
waiting | none | Периодически срабатывает при ожидании воспроизведения |
ended | none | Срабатывает после завершения воспроизведения |
liveStreamStop | none | Срабатывает при остановке прямого эфира |
hideBar | none | Срабатывает при скрытии панели управления |
Пример:
<ali-player @play="play"></ali-player>
export default {
methods: {
play() {
console.log('play callback')
}
}
Вы можете использовать все API проигрывателя Ali.
Пример:
<ali-player :source="ВидеоURL" :vid="Идентификатор видео" :playauth="Права на воспроизведение" ref="player"></ali-player>
<button @click="play">Воспроизвести</button>
<button @click="pause">Приостановить</button>
<button @click="replay">Повторить</button>
<button @click="reload">Перезагрузить</button>
export default {
methods: {
play: function(){
const player = this.$refs.player.instance
player && player.play()
},
pause: function() {
const
``` ```
player = this.$refs.player.instance
player && player.pause()
},
replay: function() {
const player = this.$refs.player.instance
player && player.replay()
},
reload: function() {
// 修改source地址后
const player = this.$refs.player
player && player.reloadPlayer()
}
}
yarn dev
: запуск разработки в режиме разработкиyarn deploy
: развёртывание разработки на gh-pagesyarn build:cjs
: сборка компонента в формате CommonJSyarn build:umd
: сборка компонента в формате UMDyarn build
: сборка компонента в обоих форматахyarn lint
: запуск eslintПроверьте свои npm-скрипты, под капотом используется vbuild.
Сгенерировано с помощью create-vue-app.
Обратитесь к упаковке vue-dplayer.
Данный контент выпущен под лицензией MIT.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )