реакція-рідний-youtube

1. Знімок екрана
2. Використання
3. API
4. Імпортування
5. Події
6. Автономний програвач (iOS)
7. Імпортування
8. Приклад
9. YouTubeStandaloneIOS.playVideo (videoId) (статичний)
10. Автономний програвач (Android)
11. Приклад
12. YouTubeStandaloneAndroid.playVideo (опції) (статичні)
13. YouTubeStandaloneAndroid.playVideos (варіанти) (статичні)
14. YouTubeStandaloneAndroid.playPlaylist (опції) (статичний)
15. Установка
16. OPTIONAL: Активований звук, коли iPhone (iOS) перебуває в режимі вібрації
17. відомі проблеми
18. Немає елементів управління в Android
19. Кілька <YouTube /> екземплярів на Android
20. Приклад програми та розробки
21. Для розробників
22. Автори

Компонент <YouTube /> для рідної реакції.

Використовує службову службу Google youtube-ios-плеєр-помічник для iOS та API програвача YouTube для Android для Android і виставляє більшу частину API, як можна більш декларативно, в React Native.

Маєте проблеми з Android? Спочатку прочитайте це

Знімок екрана

Використання

<YouTube
videoId =
play = true
fullscreen = true
loop = true

onReady = це
onChangeState = це
onChangeQuality = це
onError = this

style = alignSelf: height: 300
/>

API

Компонент YouTube

Імпортування

Властивості

• apiKey (рядок, Android ): Ваш ключ API розробника YouTube. Цей параметр є обов'язковим . Більше інформації .
• videoId (рядок): ідентифікатор відео YouTube для відтворення. Можна змінити під час монтажу, щоб змінити відтворення відео.
• videoIds (масив рядків): ідентифікатори відео YouTube для відтворення у вигляді інтерактивного списку відтворення. Можна змінювати під час монтажу. Перевизначено на початку від videoId.
• playlistId (рядок): ідентифікатор списку відтворення YouTube для відтворення в якості інтерактивного списку відтворення. Можна змінювати під час монтажу. Перевизначено при запуску відео-відео та відео-відео.
• play (boolean): керування відтворенням відео за допомогою значення true / false. Встановлення його як true у самому початку робить автозапуск відео на завантаження. За замовчуванням: false.
• loop (boolean): цикл відео. За замовчуванням: false.
• fullscreen (boolean): визначає, чи слід відтворювати відео вбудовано або в повноекранному режимі. За замовчуванням: false.
• controls (number): встановлює схему керування програвачем. Підтримувані значення - 0, 1, 2. За замовчуванням: 1. На iOS номери відповідають Ці параметри . На Android відображення 0 = CHROMELSEE, 1 = DEFAULT, 2 = MINIMAL ( Більше інформації ).
• showFullscreenButton (boolean): Показати або приховати кнопку на весь екран. За замовчуванням: true.
• showinfo (boolean, iOS ): Встановлення значення параметра "помилка" призводить до того, що гравець не відображає інформацію, подібну до назви відео та завантажувача, до початку відтворення відео. За замовчуванням: true.
• modestbranding (boolean, iOS ): цей параметр дозволяє використовувати плеєр YouTube, який не відображає логотип YouTube. За замовчуванням: false.
• origin (string, iOS ): Цей параметр надає додаткову міру безпеки для iFrame API.
• rel (boolean, iOS ): Показати відповідні відео в кінці відео. За замовчуванням: true.
• resumePlayAndroid (boolean, Android ): робить відтворення відео відновленим після того, як додаток відновиться з фону. За замовчуванням: true.

Реалізація iOS цього програвача використовує офіційний YouTube iFrame під капотом, тому більшість параметрів поведінки далі можна зрозуміти тут.

Події

• onReady: Викликається один раз, коли встановлено відеоплеєр.
• onChangeState: надсилає поточний стан програвача на e.state. Загальними значеннями є буферизація / відтворення / пауза та інше (на Android також є стан пошуку, який поставляється з розташуванням відтворення за секунди на e.currentTime).
• onChangeQuality: Надсилає поточну якість відтворення відео на e.quality.
• onError: надсилає помилки до та під час відтворення відео на e.error.
• onChangeFullscreen: Викликається, коли гравець входить або виходить з повноекранного режиму на e.isFullscreen.
• onProgress (iOS) : Викликається кожні 500 мс з прогресом часу відтворення на e.currentTime, а також тривалість на e.duration.

Методи

• seekTo (секунди): шукає заданий час у відео.
• nextVideo (): Перехід до наступного відео в списку відтворення (videoIds або playlistId). Коли цикл є істинним, перехід до першого відео з останнього. Якщо буде викликано одне відео, перезапустіть відео.
• previousVideo (): навпроти nextVideo ().
• playVideoAt (index): почне відтворення відео в індексному (нульовому) положенні у списку відтворення (videoIds або playlistId. Не підтримується для playlistId на Android).
• videosIndex (): Повертає обіцянку, результатом якого є індексне (нульове) число відео, яке наразі відтворюється у списку відтворення (videoIds або playlistId. Не підтримується для playlistId на Android), або помилки з рядком errorMessage.
• currentTime (): Повертає обіцянку, що призводить до поточного часу відтвореного відео (у секундах) або помилок з рядком errorMessage. Слід використовувати як альтернативу для Android для onProgress події на iOS.
• duration () (Android) : повертає обіцянку, результатом якого є тривалість відтвореного відео (у секундах) або помилки з рядком errorMessage. Слід використовувати як альтернативу для Android для onProgress події на iOS.
• reloadIframe () (iOS) : Конкретні реквізити (повноекранні, скромні торговельні марки, showinfo, rel, елементи керування, походження) можуть бути встановлені лише при монтажі та початковому завантаженні базового WebView, що містить iFrame YouTube (параметри <iframe>). Якщо ви хочете змінити один з них протягом життєвого циклу компонента, ви повинні знати вартість юзабіліті завантаження WebView знову, і використовувати цей метод відразу після того, як компонент отримав оновлену опору.

Автономний програвач (iOS)

Налаштування

Автономний плеєр iOS Використовується XCDYoutubeKit ( Попередження : XCDYoutubeKit не відповідає Умовам використання YouTube). Додайте наступний рядок до вашого файлу Podfile і запустіть папку інсталяції в папці / ios:

"XCDYouTubeKit", "~> 2.5"

Імпортування

Приклад

YouTubeStandaloneIOS

YouTubeStandaloneIOS.playVideo (videoId) (статичний)

Статичний метод, який повертає обіцянку для запуску окремого програвача YouTube з певним відео.

• videoId (рядок): ідентифікатор відео YouTube для відтворення. Обов'язково .

Автономний програвач (Android)

Імпортування

Приклад

YouTubeStandaloneAndroid

YouTubeStandaloneAndroid.playVideo (опції) (статичні)

Статичний метод, який повертає обіцянку для запуску окремого програвача YouTube з певним відео.

Параметри - це об'єкт з властивостями:

• apiKey (рядок): ключ API для розробника YouTube. Обов'язково .
• videoId (рядок): ідентифікатор відео YouTube для відтворення. Обов'язково .
• autoplay (boolean): Якщо відео запускається автоматично, за замовчуванням: false.
• lightboxMode (boolean): Якщо відео відтворюється в лайтбоксе замість повноекранного. За замовчуванням: false.
• startTime (номер): необов'язковий час початку відео (у секундах). За замовчуванням: 0.

YouTubeStandaloneAndroid.playVideos (варіанти) (статичні)

Статичний метод, який повертає обіцянку для запуску окремого програвача YouTube з певним відео.

Параметри - це об'єкт з властивостями:

• apiKey (рядок): ключ API для розробника YouTube. Обов'язково .
• videoIds (масив рядків): список ідентифікаторів відео, які потрібно відтворити. Обов'язково .
• autoplay (boolean): Якщо відео запускається автоматично, за замовчуванням: false.
• lightboxMode (boolean): Якщо відео відтворюється в лайтбоксе замість повноекранного. За замовчуванням: false.
• startIndex (номер): Положення індексу відео, яке буде відтворено першим. За замовчуванням: 0.
• startTime (номер): необов'язковий час початку відео (у секундах). За замовчуванням: 0.

YouTubeStandaloneAndroid.playPlaylist (опції) (статичний)

Статичний метод, який повертає обіцянку для запуску окремого програвача YouTube з певним відео.

Параметри - це об'єкт з властивостями:

• apiKey (рядок): ключ API для розробника YouTube. Обов'язково .
• playlistId (рядок): ідентифікатор списку відтворення YouTube для відтворення. Обов'язково .
• autoplay (boolean): Якщо відео запускається автоматично, за замовчуванням: false.
• lightboxMode (boolean): Якщо відео відтворюється в лайтбоксе замість повноекранного. За замовчуванням: false.
• startIndex (номер): Положення індексу відео, яке буде відтворено першим. За замовчуванням: 0.
• startTime (номер): необов'язковий час початку відео (у секундах). За замовчуванням: 0.

Установка

Підтверджено, що цей компонент працює на нативній реакції ~ 0.37 - ~ 0.45

Встановіть останню версію в пакет.json:

$ npm встановити реакцію-рідний-youtube -S

Пов'яжіть бібліотеку з проектами iOS і Android за допомогою:

$ реакція-рідне посилання

ВАЖЛИВО! (Тільки для iOS) : Щоб зв'язати ваші проекти з активами / YTPlayerView-iframe-player.html, реактивного посилання не вистачає (станом на RN ~ 0,37 - ~ 0,45). Необхідно також використовувати старий інструмент, на якому він базується, rnpm (цей крок має бути виконано після посилання "посилання-власна"):

По-перше, якщо ви його не встановили, глобально встановіть rnpm (^ 1.9.0):

$ npm встановити -g rnpm

Після цього у типі кореневої папки проекту:

$ rnpm посилання

(Цей крок також можна виконати вручну, додавши ../node_modules/react-native-youtube/assets/YTPlayerView-iframe-player.html до кореневого каталогу проекту Xcode)

ВАЖЛИВО! (Тільки для Android) : для реалізації цього компонента в Android потрібно встановити на пристрої офіційну програму YouTube. В іншому випадку користувачеві буде запропоновано встановити / активувати програму, і подія помилки буде запущена за допомогою SERVICE_MISSING / SERVICE_DISABLED.

OPTIONAL: Активований звук, коли iPhone (iOS) перебуває в режимі вібрації

Відкрийте AppDelegate.m та додайте:

• #import <AVFoundation / AVFoundation.h>

• [[AVAudioSession sharedInstance] setCategory: AVAudioSessionCategoryPlayback error: nil]; у вашому методі didFinishLaunchingWithOptions

відомі проблеми

UNAUTHORIZED_OVERLAY і PLAYER_VIEW_TOO_SMALL на Android

Версія Android цього компонента базується на офіційній Java API програвача YouTube для Android бібліотека, яка має декілька вбудованих обмежень і захистів, які ми повинні пом'якшити декількома хаками. У деяких випадках рідний вигляд, який містить примірник YouTube, не вдається правильно встановити в ієрархії перегляду React-Native, тому ми ініціюємо непомітна зміна в його стилі після пожежі наНаступній події щоб змусити реальну повторну візуалізацію на ієрархії рідних видів. Крім цього, рідний екземпляр має вбудований механізм для захисту його від інших компонентів (що викликає помилку UNAUTHORIZED_OVERLAY) і спрацьовує, якщо рідний екземпляр торкається лише іншого виду. З цієї причини ми повинні обмежити рідний вигляд з його виду, що містить, за допомогою StyleSheet.hairlineWidth, що означає єдину ширину пікселя для конкретного пристрою. Помилка PLAYER_VIEW_TOO_SMALL також може бути запущена через однакові проблеми.

Ці специфічні хаки достатньо вирішують ці пов'язані проблеми в прикладному додатку в цьому репо, а також у приватній програмі, яку я розробляю, яка використовує стандартні перегляди і (зараз застарілі) NavigationExperimental. На віртуальному AVD (Nexus 5X) і на реальному Nexus 5X, з React-Native 0.37 до 0.45.

Як ми це вирішуємо?

Різні конфігурації та середовища все ще можуть зберігати ці проблеми, тому ми повинні знайти кращі та більш загальні способи їх пом'якшення. Найкраще, коли хтось зіткнеться з цими помилками, може зробити, перш ніж опублікувати проблему , спробувати встановити та запустити приклад програми в цьому репо і подивитися, чи зберігається така ж поведінка. Якщо це так, то проблема, ймовірно, з середовищем розробки та / або апаратним забезпеченням. Якщо ні, проблема, ймовірно, з іншими бібліотеками або користувацькими компонентами, і те, як вони використовуються разом з цим компонентом. Спробуйте розібратися в природі обмежень рідного компонента та зібрати якомога більше інформації, перш ніж публікувати проблему, навіть тоді, краще додати # 161 .

Немає елементів управління в Android

Версія Android іноді може вимкнути керування гравцями навіть тоді, коли елементи керування явно встановлені для показу. Ще немає пояснення до цієї поведінки. Цю помилку керує в # 131 .

Кілька <YouTube /> екземплярів на Android

API YouTube для Android є єдиним . Це означає, що на відміну від реалізації iOS, не можна встановлювати і відтворювати відео одночасно. Якщо у вас є дві сцени, які живуть разом або приходять одна за одною (наприклад, під час переходу на нову сцену), новий <YouTube /> буде приділяти увагу одинарному мовою та відтворюватиме відео, але після відключення , старший змонтований <YouTube /> не зможе повернути цю роль і потребуватиме повторного монтування.

Приклад програми та розробки

Цей репозиторій містить прикладний проект, який можна використовувати для спроб, розробки та тестування всіх функціональних можливостей у виділеному проекті чистого додатка.

Спочатку скопіюйте сховище git і встановіть приклад проекту React-Native:

$ git clone https://github.com/inProgress-team/react-native-youtube.git
$ cd react-native-youtube / приклад
$ npm install
$ реакція-рідне посилання
$ rnpm посилання

Не забудьте встановити Pods, якщо ви хочете перевірити API, який залежить від XCDYoutubeKit:

$ cd ios
$ pod install

Потім побудуйте і запустіть з реактивно-родним run-ios / react-native run-android або вашим улюбленим IDE.

Для розробників

Щоб мати можливість безпосередньо перевірити зміни у прикладі, переустановіть пакунок з кореневого каталогу за допомогою npm i $ (npm pack ..). Ця команда запаковує кореневий каталог в файл tar npm пакунка і встановлює його локально в приклад програми.

Автори

Ліцензія

Ліцензія MIT