👉 Предварительный просмотр Адрес
✨ Характеристики
- 📦 высококачественные компоненты реагирования из коробки.
- 🛡 Используйте 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”