Рубрики
Без рубрики

Плагин React Player, разработанный с помощью Teamscript

👉Запроекта адреса 👉project адрес ✨ Характеристики 📦 Высококачественные компоненты реагирования … Помечено с помощью React, Teadercript, JavaScript, HTML.

👉 Предварительный просмотр Адрес

👉 Адрес проекта

✨ Характеристики

  • 📦 высококачественные компоненты реагирования из коробки.
  • 🛡 Используйте TeampScript для разработки, укажите полный файл определения типа.
  • 🌍 Информационная языковая поддержка.
  • 🎨 Темы, компоненты, возможности настройки.
  • 👊 мощный API и Функция обратного вызова
  • ⚡ маленький размер, 80 kb.
  • 💎 Поддержка HLS Формат (M3U8) и т. Д.

📦 Установить

npm install jol-player --save

🔨 Пример

import JoLPlayer from "jol-player";

const App = () => (
  <>
    
  
);

👉 Демо дело

📘 Документация

Свойства/Конфигурация

Следующие атрибуты приходят из Опция Элемент конфигурации недвижимости

количество ширина Ширина видео-контейнера (обязательно) требуется
количество высота Высота видео-контейнера (обязательно) требуется
нить VideoRc. Видео-адрес (обязательно) требуется
нить тема тема # FFB821.
нить плакат Изображение видео крышки
Реагировать. Reactinode. SetendPlayContent. Настроить то, что отображается в конце видео
Реагировать. Reactinode. SetBufferTent. Пользовательский видео буфера загрузки
Нижний правый, центр пауза Положение кнопки паузы Нижний правый
количество hidemousetime. Сколько миллисекунд, без каких-либо операций, скрыть мышь и контроллер / MS 2000
логический Isshowmultiple. Следует ли отображать функцию множителя истинный
логический Isshowset. Следует ли отобразить функцию настройки истинный
логический Isshowcreenshot. Следует ли отображать функцию скриншота истинный
логический Isshowpicture. Стоит ли показывать картинку на картинке истинный
логический Isshowwebfullscreen Следует ли отображать полный экран веб-страницы истинный
ж, выделять язык Язык ж
логический Isshowpausebutton Следует ли показать кнопку паузы истинный
качественные материалы [] качественный Список выбора определения качества видео
H264 HLS. Видеотип Формат воспроизведения видео, поддерживает H264 (.mp4, .webm, .ogg), hls (.m3u8) H264.
логический ISTOAST. Будь то показывать тост ложный
слева, правая, левый, левый, правыйБотт, центр тостоположение Положение тоста, это значение имеет только эффект, когда iStomast верно слева
логический Isprogressfloat. Следует ли отобразить подсказку плавающего слоя прогресса ложный
ТП, БТ ProgressfoloationPosition Положение приглашения плавающего слоя панели прогресса. Это значение эффективно только тогда, когда iSprogressfloatis true BT.

Советы: КАЧЕСТВОКТРИБУЮЩИМЫЕ : Декларация интерфейса выглядит следующим образом

/**
 * 360P SD
 * 540P HD
 * 720P FHD
 * 1080P BD
 */
export type qualityName = 'SD' | 'HD' | 'FHD' | 'BD';

export type qualityKey = '360P' | '540P' | '720P' | '1080P';

export interface qualityAttributes {
  name: T;
  url: string;
}

Метод

нагрузка () => пустота Перезагрузка
Пауза () => пустота Пауза
играть () => пустота Начните играть
SetVolume. (par: число) => пустота Установите громкость, [0-100]
стремиться (par: число) => пустота Установите позицию воспроизведения указанного видео / с
setvideosrc. (Par: строка) = > пустота Установите адрес, чтобы играть в видео SRC

Подсказка: Вышеуказанный метод требует помощи Ref Можно позвонить, как: xxx.current.load ()

👉 Подробнее, пожалуйста, обратитесь к демонстрационному делу

Функция обратного вызова

export interface videoAttributes {
  /**
   * @description Whether to play
   */
  isPlay: K;
  /**
   * @description Current time/s
   */
  currentTime: T;
  /**
   * @description Total time
   */
  duration: T;
  /**
   * @description Cache duration/s
   */
  bufferedTime: T;
  /**
   * @description Whether to open picture-in-picture
   */
  isPictureinpicture: K;
  /**
   * @description Volume
   */
  volume: T;
  /**
   * @description Video playback multiple
   */
  multiple: T;
  /**
   * @description Whether to end
   */
  isEndEd: K;
  /**
   * @description Wrong
   */
  error: null | T;
}
export type qualityKey = '360P' | '540P' | '720P' | '1080P';
onprogressmousedown. (E: VideoAttributes) => пустота Нажмите и удерживайте слайд-бар, перетащите обратный вызов
onprogressmouseup (E: VideoAttributes) => пустота Слайд-бар Нажмите и выпустите обратный вызов
onplay (E: VideoAttributes) => пустота Видео начать воспроизводить обратную связь
оно (E: VideoAttributes) => пустота Перезвоните Когда видео приостановлено
ontimeChange (E: VideoAttributes) => пустота Видео играет, Время изменения обратного вызова
пожелание (E: VideoAttributes) => пустота Перезвоните Когда видео заканчивается
onvolumeChange (E: VideoAttributes) => пустота Перезвоните Когда объем меняется
onerror. () => пустота Бесплатный обратный вызов
OnquiteChange (E: VideoAttributes) => пустота Перезвоните Когда разрешение видео меняется

Интерфейс параметра, полученный Jolplaye R следующим образом: 👇

export interface videoparameter extends Partial {
  style?: React.CSSProperties;
  /**
   * @description Component configuration items
   */
  option: videoOption;
  className?: string;
  ref?: JoLPlayerRef
}

👉 Предварительный просмотр Адрес

👉 Адрес проекта

Оригинал: “https://dev.to/lgf196/a-react-player-plugin-developed-using-typescript-12ok”