1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/slacrey-vue-aliplayer

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

Vue-AliPlayer

Vue 2.x видеоплеер на основе vue-aliplayer.

Установка

npm install vue-aliplayer -S

Использование

import VueAliplayer from 'vue-aliplayer'

export default {
  components: {
    'ali-player': VueAliplayer
  }
}

Props

Название Тип Значение по умолчанию Описание
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

Вы можете использовать все 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()
      }
    }

Development

  • yarn dev: запуск разработки в режиме разработки
  • yarn deploy: развёртывание разработки на gh-pages
  • yarn build:cjs: сборка компонента в формате CommonJS
  • yarn build:umd: сборка компонента в формате UMD
  • yarn build: сборка компонента в обоих форматах
  • yarn lint: запуск eslint

Проверьте свои npm-скрипты, под капотом используется vbuild.


Сгенерировано с помощью create-vue-app.

Обратитесь к упаковке vue-dplayer.

License

Данный контент выпущен под лицензией MIT.

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

Описание недоступно Развернуть Свернуть
MIT
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/slacrey-vue-aliplayer.git
git@api.gitlife.ru:oschina-mirror/slacrey-vue-aliplayer.git
oschina-mirror
slacrey-vue-aliplayer
slacrey-vue-aliplayer
master