Как сделать свой плеер из плеера Youtube

Мне нужно загрузить более одного видео с помощью API-интерфейса youtube. Это мой первый раз, используя его, поэтому я не уверен, что я делаю неправильно, но это то, что я пытаюсь:

var player; var player2; function onYouTubePlayerAPIReady() < player = new YT.Player(‘player’, < videoId: ‘hdy78ehsjdi’ >); player2 = new YT.Player(‘player’, < videoId: ’81hdjskilct’ >); >
Hello World 09 июнь 2013, в 21:27
Поделиться
Поделиться:
youtube-api

4 ответа

• инициализировать и сохранять информацию о видеоплеерах ( ControlId,width,height,VideoId ) в массиве
• вызов onYouTubeIframeAPIReady для создания всего видео игроки

Пример

var playerInfoList = [,]; function onYouTubeIframeAPIReady() < if(typeof playerInfoList === ‘undefined’) return; for(var i = 0; i < playerInfoList.length;i++) < var curplayer = createPlayer(playerInfoList[i]); >> function createPlayer(playerInfo) < return new YT.Player(playerInfo.id, < height: playerInfo.height, width: playerInfo.width, videoId: playerInfo.videoId >); >
Vadim Gremyachev 21 сен. 2013, в 20:29
Поделиться

вы пробовали это с помощью событий? По какой-то причине я не могу заставить мои события работать. function createPlayer(playerInfo) < return new YT.Player(playerInfo.id, < videoId: playerInfo.videoId, events: < ‘onReady’: onPlayerReady, ‘onStateChange’: onPlayerStateChange >>); > function onPlayerReady(event) < console.log(‘ready’); >

Видео на сайте №3. Как сделать свой плеер для видео. video.js

Fawn 20 сен. 2016, в 19:40

Первым параметром нового YT.Player должен быть идентификатор элемента HTML (например, DIV), который должен быть заменен iframe на видео. Когда вы используете «плеер» для обоих этих объектов, вы загружаете оба в один и тот же элемент.

var player; var player2; function onYouTubePlayerAPIReady() < player = new YT.Player(‘ytplayer1’, < height: ‘390’, width: ‘640’, videoId: ‘hdy78ehsjdi’ >); player2 = new YT.Player(‘ytplayer2’, < height: ‘390’, width: ‘640’, videoId: ’81hdjskilct’ >); >

Параметры функций описаны в документации API Youtube:
https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player (EDIT: изменено на правильную ссылку)

Egari 09 июнь 2013, в 23:52
Поделиться
отлично. Тем не менее, похоже, что Vars плеера не нужны.
Marcus 18 сен. 2016, в 09:42
Ты прав mbee, они могут быть опущены. Я просто исправил фрагмент OP.

Egari 18 сен. 2016, в 09:56

У меня была более широкая проблема, которая сводилась к этой же проблеме. Требования, которые у меня были, заключались в том, чтобы написать класс JS для управления одним или несколькими (количество может варьироваться от 1 до бесконечности). Бэкэнд-системой является ExpressionEngine (но это не имеет значения здесь). Основная цель состояла в том, чтобы создать платформу для аналитики, которая подталкивает отдельные данные к нашей платформе Adobe Analytics. Здесь показана только часть, которая дает игровой счет, его можно значительно расширить отсюда.

CMS позволяет редакторам создавать модули на странице с изображением видео. Одно видео на модуль. Каждый модуль в основном представляет собой раздел HTML, организованный через Bootstrap 3 (не относится к этому вопросу).

Соответствующий HTML выглядит следующим образом:

Часть, которая гласит: «» — это идентификатор видео YouTube от нашей CMS. Это позволяет использовать уникальный идентификатор для каждого внедренного элемента. Это важно позже.

Ниже я вычеркнул:

var innovYouTube_ = new Ariba.Innovations.YouTube.Class(< ‘innovYouTubeVideoId’: », ‘innovYouTubeVideoTitle’: », ‘innovYouTubeDivId’ : ‘js_youTubeFrame_’ >); innovYouTube_.Init(); // And. Go! var onYouTubeIframeAPIReady = (function() < try< //wrap this in try/catch because it actually throws errors when it runs subsequent times — this is expected as it related to YouTube «rerunning» the function on other videos. innovYouTube_.config.functionCache = onYouTubeIframeAPIReady; //cache the existing global function return function() < try< innovYouTube_.onYouTubeIframeAPIReady(); //execute this instance function var newOnYouTubeIframeAPIReady = innovYouTube_.config.functionCache.apply(this, arguments); //add instances to global function return newOnYouTubeIframeAPIReady; //update global function >catch(err)<> >; >catch(err)<> >)();

Здесь также появятся теги шаблона ExpressionEngine — это только идентификатор видео и название видео с YouTube. Чтобы воспроизвести это, вам нужно будет их изменить.

Это позволяет мне динамически обновлять один глобальный обратный вызов с новым кодом для каждого вновь встроенного видео. В конце концов, этот обратный вызов будет содержать вызовы в свои собственные экземпляры моего класса. Вам нужны эти блоки try/catch, потому что это порождает ложноположительную ошибку для всех «других» вложений, кроме той, которую она фактически выполняет «прямо сейчас» — помните, что этот script выполняется один раз для каждого встраивания на странице. Ошибки ожидаются и фактически не вызывают проблем, поэтому try/catch подавляет их.

Используя тег шаблона CMS, я создаю каждый экземпляр на основе идентификатора видео YouTube. Я столкнулся бы с проблемой, если бы кто-то добавил один и тот же видеомодуль несколько раз, но деловая проблема легко справилась, поскольку это не должно было случиться. Это позволяет мне создавать уникальные экземпляры моего класса снова и снова для каждого видео.

Критическая часть этого script основана на этом чрезвычайно полезном SO-ответе: Программный код для функции javascript программно

Вот настоящий класс. Он прокомментировал в основном. Мы используем jQuery, поэтому вы увидите одно важное использование этого здесь в методе $.extend(). Я использую это как удобство в методе конструктора классов, но вы можете сделать это с помощью vanilla JS (JavaScript-эквивалент метода расширения jQuery). Я просто нахожу jQuery проще прочитайте, и, поскольку он доступен мне, я использую его.

if (typeof Ariba === «undefined») < var Ariba = <>; > if (typeof Ariba.Innovations === «undefined») < Ariba.Innovations = <>; > if (typeof Ariba.Innovations.YouTube === «undefined») < Ariba.Innovations.YouTube = <>; > if (typeof Ariba.Innovations.YouTube.Class === «undefined») ;//static configuration. Will overwrite any other settings with the same name this.config = ; this.config = $.extend(true, this.config, config);//inserts (destructively!) the instance settings. this.config = $.extend(true, this.config, this.static);//inserts (destructively!) the static settings. this.config.this = this; >; Ariba.Innovations.YouTube.Class.prototype.Init = function () < //Note: have to allow it to write it over an over because calling the API script is what makes YouTube call onYouTubeIframeAPIReady. //if (document.getElementById(‘js_youtubeFrameAPI’) === null) < // don’t add the script again if it already exists! this.config.apiScript = document.createElement(‘script’); this.config.apiScript.src = ‘https://www.youtube.com/iframe_api’; this.config.apiScript.id = ‘js_youtubeFrameAPI’ + this.config.innovYouTubeVideoId; this.config.firstScriptTag = document.getElementsByTagName(‘script’)[0]; this.config.firstScriptTag.parentNode.insertBefore(this.config.apiScript, this.config.firstScriptTag); //>//else < console.log(«iframe script already embedded», this.config.innovYouTubeVideoId); >> Ariba.Innovations.YouTube.Class.prototype.onYouTubeIframeAPIReady = function (event) < //console.log(«onYouTubeIframeAPIReady», this.config.innovYouTubeVideoId, arguments); var _this = this; //console.log(this); this.config.ytPlayer = new YT.Player(this.config.innovYouTubeDivId, < videoId: this.config.innovYouTubeVideoId, events: < ‘onReady’: _this.onPlayerReady.bind(_this), ‘onStateChange’: _this.onPlayerStateChange.bind(_this) >>); > Ariba.Innovations.YouTube.Class.prototype.onPlayerReady = function (event) < //console.log(«onPlayerReady», this.config.innovYouTubeVideoId, event); >Ariba.Innovations.YouTube.Class.prototype.onPlayerStateChange = function (event) < //console.log(«onPlayerStateChange», this.config.innovYouTubeVideoId, event, this); if (event.data === YT.PlayerState.PLAYING !this.config.adobeAnalyticsFired) < //console.log(«YouTube Video is PLAYING!!», this.config.innovYouTubeVideoId); this.config.adobeAnalyticsFired = true; if (typeof _satellite !== «undefined») < window._satellite.data.customVars.adhoc_tracker_val = «Innovations Video: » + this.config.innovYouTubeVideoTitle + » (» + this.config.innovYouTubeVideoId + «)»; _satellite.track(‘adhoctrack’); >> > >

Несколько других примечаний:

Сохранение области в экземпляре класса легко, когда вы решаете основную проблему глобального обратного вызова. Вам просто нужно добавить .bind(). Например:

‘onReady’: _this.onPlayerReady.bind(_this)

Вы также можете увидеть:

var _this = this;

Это значит, что область «this» для экземпляра не потеряна случайно. Возможно, это не обязательно, но это соглашение, которое я принял за эти годы.

В любом случае, я работаю над этим уже неделю, и решил, что я поделюсь им с сообществом SO, так как из моего поиска ответов многие другие искали решения для этого.

Carnix 17 март 2017, в 22:58
Поделиться

Примечание: с тех пор я исправил ошибку . вам нужно отфильтровать идентификаторы YouTube по тире, так как они испортят скрипт. например: innovYouTube_ , где идентификатор похож на xyz123-123, так как это сделало бы имя переменной innovYouTube_xyz123-123, которое явно недопустимо. Просто хотел выбросить это там.

Carnix 19 апр. 2017, в 17:33

Мне нужно было то же самое в React. Развернувшись на Вадиме, вы можете сделать что-то вроде следующего и добавить их к объекту, а затем создать игрока, если не знаете, как будет выглядеть массив игроков.

const YoutubeAPILoader = < _queue: [], _isLoaded: false, load: function (component) < // if the API is loaded just create the player if (this._isLoaded) < component._createPlayer() >else < this._queue.push(component) // load the Youtube API if this was the first component added if (this._queue.length === 1) < this._loadAPI() >> >, _loadAPI: function () < // load the api however you like loadAPI(‘//youtube.com/player_api’) window.onYouTubeIframeAPIReady = () => < this._isLoaded = true for (let i = this._queue.length; i—;) < this._queue[i]._createPlayer() >this._queue = [] > > >
souporserious 09 июль 2016, в 20:12
Поделиться

Ещё вопросы

• 0 Как показать / скрыть теги div на основе выбора радиокнопки в форме
• 0 Звонок из Angular в webAPI на другом домене превращается в ОПЦИИ
• 0 Отметка времени одного часа
• 0 Почему этот код печатает 0
• 0 Компилировать вложенные директивы в модульном тесте в Angular
• 0 jquery Map () не работает над списком HTML
• 1 Как увеличить скорость использования нечеткого сопоставления в кадре данных?
• 0 Angular: Могу ли я убедиться, что мой модуль журналирования настроен перед $ exceptionHandler при нормальных обстоятельствах?
• 1 масштабирование ткани js canvas со всеми ее объектами
• 1 Эффективная фильтрация больших наборов многоключевых объектов
• 1 Не удается открыть новое действие по методу onResponse of Volley
• 0 m_hIcon = AfxGetApp () -> LoadIcon (IDR_MAINFRAME); Утверждение не выполнено: at afxwin1.inl
• 0 Неожиданное поведение PHP-функции rename (), используемой в моем коде для переименования файлов
• 0 выбор ячейки таблицы на основе ее идентификатора с помощью jquery
• 1 Удалить средние элементы из массива
• 1 Rijndael неправильно шифрует / дешифрует выходные данные
• 0 переключать отображение тега p в зависимости от значения внутри
• 1 Как получить выбранный документ на viewPanel xPage для данных внешнего источника?
• 1 Не определено в Sails js «Неправильные атрибуты отправлены на неопределенное»
• 0 Регулярное выражение для соответствия шаблону как 2: 1 в угловых js
• 0 Получение history.js для запуска функции
• 1 Панды поворачивают один столбец, используя то же значение столбца, что и заголовки столбцов
• 0 Войдите в систему с помощью JWT (веб-токена Json) и приложения Devise in Rails
• 0 Сортировать массив по указанным идентификаторам?
• 0 MySQL объявление переменной, вызывающей синтаксическую ошибку
• 1 Изменить рекурсивный. Затем на асинхронный / ожидание
• 0 Добавление 2d массива
• 0 Как получить полный путь изображения в php
• 1 Опция клика не работает в программе Appium
• 1 Как сбросить статическое свойство только для чтения?
• 1 Получить все несжатые байты из сжатого файла
• 1 Я пытаюсь вернуть список, заполнив дочерний узел
• 0 Как прочитать устройство / dev / ttyUSB0 в Linux?
• 1 Установка значения из одного класса в другой в Java
• 0 Библиотека не связывает / в том числе правильно
• 1 Java-массивы и случайные числа
• 1 Сбой выпуска сборки Android с причиной: java.lang.ArrayIndexOutOfBoundsException: 213 (проблема защиты)
• 1 Заполните словарь несколькими понятиями
• 1 Как использовать Содержит с Guid?
• 0 jQuery Dialog блокирует горячие клавиши Firefox
• 0 Определение ключевых слов C 11 в строках (проблемы с string.at ())
• 1 Нажмите: как применить действие ко всем командам и подкомандам, но разрешить команде отказаться (часть duex)?
• 1 Лучший способ создать этот класс Locus
• 1 Python scipy функция не принимает глобальные переменные
• 1 Обновление до TLSV1.0 или 1.1 до TLSV1.2 в Android с использованием httpclient
• 1 Добавить DataFrame внутри функции
• 1 Библиотеки Python отсутствуют в Docker-контейнере после их установки в сборке img
• 0 Страница открыта с использованием загрузки jQuery с неверными путями к изображениям
• 1 Intellij компилирует и собирает все классы (похоже, не использует кеш)
• 1 Веб-формы .NET обновляют контент на стороне сервера

Источник: overcoder.net

Урок 19. Делаем MP3-плеер на DFPlayer Mini и Arduino.

Как воспроизвести аудиофайлы в формате wav я уже рассказывал в уроке: Arduino SD карта. Воспроизводим звуки и музыку в wav формате. Данный способ подходит, когда нужно воспроизвести файлы не очень высокого качества, например, уведомления, оповещение и пр. Если же надо воспроизводить файлы в формате mp3, нам поможет модуль DFPlayer Mini.

MP3-плеер DFPlayer Mini позволяет воспроизводить аудиофайлы, записанные на карту памяти формата microSD. С помощью этого плеера можно управлять музыкой: приостановка и возобновление воспроизведения аудиофайла. А также можно установить громкость из 30-ти уровней громкости и одни из 6-ти режимов эквалайзера.

DFPlayer отлично подходит для Arduino проектов, в которых нужно воспроизводить уведомления или оповещения, а также для музыкального сопровождения с автоповтором выбранного трека, воспроизведением всех треков, или случайное воспроизведение треков.

Характеристики DFPlayer MP3 mini:

• Напряжение питания: 3,3–5 В
• Количество каналов: 1 моно, 3 Вт + 2 стерео, без усилителя
• Поддерживаемые частоты дискретизации: 8, 11, 12, 16, 22, 24, 32, 44,1, 48 кГц
• Разрядность ЦАП: 24 бита
• Поддерживаемые файловые системы: FAT16, FAT32
• Максимальный объём SD-карты: 32 ГБ
• Количество каталогов композиций: до 100
• Количество композиций в каталоге: до 255
• Форматы аудиофайлов: MP3, WAV, WMA
• Кол-во уровней громкости: 30
• Режимов эквалайзера: 6 (Normal/Pop/Rock/Jazz/Classic/Base)

Для реализации самого простого плеера не нужно подключать DFPlayer к Arduino. Достаточно подключить несколько кнопок вот по такой схеме.

Но у нас уроки про Arduino, поэтому рассмотрим простой пример подключения MP3-плеер к Arduino, который подключается по аппаратному или программному UART порту (пины RX и TX) Ардуино.

Код с выводом отладочной информацией будет вот таким. Данный код взят с сайта библиотеки DFRobotDFPlayerMini. Также нам понадобится библиотека для работы спрограммным UART портом SoftwareSerial.Скачать библиотеки можно внизу статьи, в разделе материалы для скачивания.

Для воспроизведения аудиофайла необходимо поместить на карту памяти microSD один трек. Файлы рекомендуется помещать в папку mp3 и называть порядковыми номерами вот в таком формате 0001.mp3. Мой опыт показывает, что можно скидывать файлы с любым названием и помещать в корень флешки, но воспроизводиться файлы будут в том порядке, в каком их загрузилина карту памяти. При пакетной загрузке одни файлы загружаются быстрее, а другие медленнее, из-за чего воспроизведение треков идет в хаотичном порядке.

Пример MP3-плеера на DFPlayer Mini и Arduino с возможностью выбора трека и изменением громкости.

Давайте сделаем полноценный MP3-плеера на Arduino. Для этого нам понадобится:

• ARDUINO NANO. Купить можно на Aliexpress или в России.
• Модуль MP3-плеера DFPlayer Mini. Купить можно на Aliexpress.
• Кнопки. Купить можно на Aliexpress или в России.
• Провод DuPont. Купить можно на Aliexpress или в России.
• Плата макетная беспаечная 55х82х8.5 мм. Купить можно на Aliexpress или в России.
• Светодиоды 5mm. Купить можно на Aliexpress или в России.
• 2 резистора на 10 кОм.. Купить можно на Aliexpress или в России.
• Динамик. Я использую от ноутбука.

Все компоненты нашего будущего MP3-плеера на DFPlayer соединяем по схеме.

Загрузим файлы с треками на карту памяти microSD, я использую 3 трека с YouTube, чтобы можно было воспроизводить музыку в видеоролике и не получить бан. Архив с треками можно скачать внизу статьи, в разделе материалы для скачивания.

Код для MP3-плеера на DFPlayer Mini и Arduino с возможностью выбора трека и изменением громкости будет вот такой.

#include «DFRobotDFPlayerMini.h» // библиотека для эмуляции Serial порта #include // создаём объект mySoftwareSerial и передаём номера управляющих пинов RX и TX // RX — цифровой вывод 10, необходимо соединить с выводом TX дисплея // TX — цифровой вывод 11, необходимо соединить с выводом RX дисплея SoftwareSerial mySoftwareSerial(10, 11); // RX, TX для плеера DFPlayer Mini DFRobotDFPlayerMini myDFPlayer; int buttonNext = 2; // кнопка следующий трек int buttonPause = 3; // кнопка пауза/ пуск int buttonPrevious = 4; // кнопка предыдущий трек int buttonVolumeUp = 5; // кнопка увеличение громкости int buttonVolumeDown = 6; // кнопка уменьшение громкости boolean isPlaying = false; // статус воспроизведения/пауза void setup() < pinMode(buttonPause, INPUT_PULLUP); pinMode(buttonNext, INPUT_PULLUP); pinMode(buttonPrevious, INPUT_PULLUP); pinMode(buttonVolumeUp, INPUT_PULLUP); pinMode(buttonVolumeDown, INPUT_PULLUP); mySoftwareSerial.begin(9600); Serial.begin(9600); delay(1000); Serial.println(); Serial.println(«DFPlayer Mini Demo»); Serial.println(«Initializing DFPlayer. «); if (!myDFPlayer.begin(mySoftwareSerial)) < Serial.println(«Unable to begin:»); Serial.println(«1.Please recheck the connection!»); Serial.println(«2.Please insert the SD card!»); while (true); >Serial.println(F(«DFPlayer Mini online.»)); myDFPlayer.setTimeOut(300); //—-Set volume—- myDFPlayer.volume(15); //Set volume value (0~30). //—-Set different EQ—- myDFPlayer.EQ(DFPLAYER_EQ_NORMAL); myDFPlayer.outputDevice(DFPLAYER_DEVICE_SD); myDFPlayer.play(1); //Воспроизведение первого mp3 isPlaying = true; // воспроизводим Serial.println(«Playing..»); //—-Читать информацию—- Serial.println(myDFPlayer.readState()); //читать состояние mp3 Serial.println(myDFPlayer.readVolume()); //Текущая громкость Serial.println(myDFPlayer.readEQ()); // читаем настройку эквалайзера Serial.println(myDFPlayer.readFileCounts()); // читать все файлы на SD-карте Serial.println(myDFPlayer.readCurrentFileNumber()); // текущий номер файла воспроизведения > void loop() < if (digitalRead(buttonPause) == LOW) < if (isPlaying) < // если было воспроизведение трека myDFPlayer.pause(); // пауза isPlaying = false; // пауза Serial.println(«Paused..»); >else < // иначе isPlaying = true; // воспроизводим myDFPlayer.start(); //запускаем mp3 с паузы >delay(500); > if (digitalRead(buttonNext) == LOW) < if (isPlaying) < myDFPlayer.next(); //Next Song Serial.println(«Next Song..»); >delay(500); > if (digitalRead(buttonPrevious) == LOW) < if (isPlaying) < myDFPlayer.previous(); //Previous Song Serial.println(«Previous Song..»); >delay(500); > if (digitalRead(buttonVolumeUp) == LOW) < if (isPlaying) < myDFPlayer.volumeUp(); //Volume Up Serial.println(«Volume Up..»); >delay(500); > if (digitalRead(buttonVolumeDown) == LOW) < if (isPlaying) < myDFPlayer.volumeDown(); //Volume Down Serial.println(«Volume Down..»); >delay(500); > >

У платы Arduino NANO всего один аппаратный Serial Port, поэтому будем использовать программный порт. Для этого нужно установить и подключить библиотеку SoftwareSerial.h.

Чтоб проверить, подключен или нет DFPlayer используется условие:

Если в мониторе порта мы видим надпись «DFPlayer Mini online.» все подключено правильно и работает.

Данные строки кода

Включают первый трек. И выводят в монитор порта информацию об этом.

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

Первая строчка выводит статус: цифра с кодом.

Вторая строчка выводить уровень текущей громкости от 0 до 30

Третья выводит настройки эквалайзера, также в цифровом значении.

Четвертая выводит, сколько треков найдено на карте памяти.

Последняя стока выводит, какой трек воспроизводится сейчас.

В мониторе порта это будет выглядеть вот так:

В основном цикле loop выводим условия проверки нажатия той или иной кнопки. И выполняем нужную команду.

if (digitalRead(buttonNext) == LOW) < if (isPlaying) < myDFPlayer.next(); //Next Song Serial.println(«Next Song..»); >delay(500); >

Это одно условие для примера, остальные устроены аналогично, их рассматривать не будем. Список команд для работы с DFPlayer Mini myDFPlayer.next(); // Воспроизвести следующий mp3

myDFPlayer.previous(); // Воспроизвести предыдущий mp3 myDFPlayer.play(1); //Воспроизведение первого mp3 myDFPlayer.loop(1); //зациклить первый mp3 myDFPlayer.pause(); //приостановить mp3 myDFPlayer.start(); //запускаем mp3 с паузы myDFPlayer.playFolder(15, 4); //воспроизводить определенный mp3 в SD: /15/004.mp3; Имя папки (1 ~ 99); myDFPlayer.enableLoopAll(); //зациклить все mp3 файлы. myDFPlayer.disableLoopAll(); //остановить цикл всех mp3 файлов. myDFPlayer.playMp3Folder(4); //воспроизводить конкретный mp3 в SD: /MP3/0004.mp3; Имя файла (0 ~ 65535) myDFPlayer.advertise(3); //рекламируем конкретный mp3 в SD: /ADVERT/0003.mp3; Имя файла (0 ~ 65535 myDFPlayer.playLargeFolder(2, 999); //воспроизводить конкретный mp3 в SD: /02/004.mp3; Имя папки (1 ~ 10); Имя файла (1 ~ 1000) myDFPlayer.loopFolder(5); //зациклить все mp3 файлы в папке SD: / 05. myDFPlayer.randomAll(); //Произвольное воспроизведение всех mp3. myDFPlayer.enableLoop(); //включить цикл. myDFPlayer.disableLoop(); //отключить цикл

Как видите, не так много кода и алгоритм работы достаточно несложный. Планирую реализовать пару проектов с использованием модуля DFPlayer Mini и Arduino, ESP8266, ESP32 для публикации на сайте. Благо, опыт работы с этим модулем и данными платформами есть.

Пишите ваши предложения и пожелания в комментариях. Чем больше будет откликов, тем чаше будут выходить проекты и уроки на сайте.

Не забывайте подписываться на канал Youtube и вступайте в группы в Вконтакте и Facebook.

Всем Пока-Пока.

И до встречи в следующем уроке.

Понравилась статья? Поделитесь ею с друзьями:

Источник: portal-pk.ru

Android ExoPlayer: воспроизводите видео в своем приложении, как YouTube

Существуют постоянные потребности в приложениях для воспроизведения видео в развлекательных, образовательных и многих других целях. Вы можете ясно увидеть это, если посмотрим на использование Youtube за последние пять-десять лет. Даже в самых отдаленных уголках земного шара количество мобильных развлечений резко возросло.

Даже неграмотные жители отдаленных деревень используют видеоприложения в развлекательных целях. С другой стороны, из-за пандемии, вызванной COVID-19, большинство школ по всему миру переходят на электронное обучение. По этим причинам очень многое можно сделать с помощью одного хорошего приложения, созданного для удовлетворения потребностей современного мира. Хватит разговоров, давайте погрузимся в нашу концепцию: Exoplayer.

Вступление

До ExoPlayer Android MediaPlayer API был основным решением для воспроизведения аудио и видео как локально, так и через Интернет на устройствах Android. Вначале воспроизвести простое видео с помощью MediaPlayer было легко, но если вы хотели создать такой плеер, как Youtube, это потребовало бы много времени, усилий и усилий. Мое правило — не изобретать велосипед, а лучше использовать уже имеющееся идеальное решение.

ExoPlayer — это видеоплеер, работающий в приложении YouTube для Android. Это не часть платформы Android — это проект с открытым исходным кодом, поддерживаемый Google. ExoPlayer — это библиотека, предоставляемая Google, которая обрабатывает вещи, связанные со звуком и видео от нашего имени, и мы можем вызвать несколько методов для игры с ней. Мы также можем сделать собственные настройки пользовательского интерфейса игрока.

ExoPlayer был построен на основе Android MediaCodec API, отсутствовавшего в Android 4.1 (уровень API 16). Итак, если мы хотим интегрировать Exoplayer, минимальная версия API должна быть установлена ​​на API 16 для ваших приложений.

Зачем использовать ExoPlayer?

• ExoPlayer поддерживает такие функции, как DASH (динамическая адаптивная потоковая передача через HTTP), HLS (прямая потоковая передача HTTP), SmoothStreaming и общее шифрование, которые не поддерживаются MediaPlayer .
• ExoPlayer имеет модульную конструкцию, поэтому его легко расширять и настраивать.
• Крупные гиганты потокового видео на Android в основном зависят от Exoplayer из-за его функций и гибкости. ExoPlayer — это видеоплеер, работающий на Android, YouTube, Netflix, медиаплеер Amazon для Prime, HotStar и многих других популярных и надежных приложениях.
• Хорошая документация и руководства.
• Это бесплатно!

Хватит разговоров, займемся кодированием.

Базовое приложение ExoPlayer для Android

Давайте проверим интеграцию, создав образец приложения и проверив пошаговую процедуру для лучшего понимания. Создайте новый проект в своей студии и следуйте инструкциям ниже.

Если у вас нет времени на пошаговые инструкции или вы собираетесь погрузиться в код напрямую, посмотрите репозиторий по ссылке на образец интеграции:

Шаг 1. Добавьте зависимость ExoPlayer в файл build.gradle на уровне приложения.

implementation ‘com.google.android.exoplayer:exoplayer:2.11.8’

Это может быть любая версия, которую вы выберете — я только что добавил последнюю версию, доступную на тот момент. Кстати, у нас также есть возможность добавлять только те библиотечные модули, которые нам действительно нужны, а не полный пакет, упомянутый выше.

Доступные библиотечные модули:

• exoplayer-core : Основные функции (обязательные).
• exoplayer-dash : Поддержка содержимого DASH.
• exoplayer-hls : Поддержка содержимого HLS.
• exoplayer-smoothstreaming : Поддержка содержимого SmoothStreaming.
• exoplayer-ui : компоненты пользовательского интерфейса и ресурсы для использования с ExoPlayer.

В этом примере давайте добавим полный пакет, потому что добавление отдельных модулей имеет разные требования и иногда может вызывать ошибки.

Также убедитесь, что вы добавили JCenter и Google в раздел repositories файла build.gradle на уровне проекта, хотя в новой версии они добавлены по умолчанию.

repositories google() jcenter() >

Шаг 2. Включите поддержку Java8 на уровне приложения build.gradle

compileOptions targetCompatibility JavaVersion.VERSIONMediaPlayer8 >

Шаг 3. Создайте XML и добавьте к нему ExPlayer View.

Чтобы настроить пользовательский интерфейс, чтобы он выглядел как Youtube или что-то еще, нам нужно добавить несколько макетов, чертежей и т. Д., Которые мы увидим в моих следующих статьях. Вот, давайте расширим базовый PlayerView :

Шаг 4. Инициализируйте проигрыватель, создав экземпляр ExoPlayer и назначив источник для воспроизведения.

Когда мы закончили с пользовательским интерфейсом, давайте создадим экземпляр ExoPlayer, чтобы начать воспроизведение мультимедиа. Мы можем использовать доступный шаблон построителя для создания экземпляра. В большинстве случаев использование SimpleExoPlayer было бы удобным способом сделать это — реализация интерфейса ExoPlayer .

val videoPlayer = SimpleExoPlayer.Builder(this).build()

Поскольку мы создали экземпляр ExoPlayer, теперь нам нужно назначить его представлению, созданному в XML:

video_player_view?.player = videoPlayer

Затем нам нужно создать исходный код для воспроизведения. Доступно множество типов MediaSource — начнем с ProgressiveMediaSource . Давайте возьмем URL и воспроизведем его, построив ProgressiveMediaSource .

Обычно это делается в два этапа. На первом этапе мы создаем экземпляр DefaultDataSourceFactory , а затем передаем этот экземпляр ProgressiveMediaSource.Factory , как показано ниже:

sampleUrl — строковая переменная, содержащая URL-адрес потоковой передачи.

К настоящему моменту метод инициализации проигрывателя будет выглядеть так:

Шаг 5. Добавьте базовые функции паузы и воспроизведения, относящиеся к жизненному циклу действий

Когда мы закончим, не забудьте отпустить плеер:

Шаг 6. Добавьте Интернет-разрешение в файл манифеста и запустите приложение.

Вы должны увидеть воспроизводимое ниже видео со всеми функциями проигрывателя: пауза, воспроизведение, перемотка назад, параметры поиска и т. Д.

Вся деятельность будет выглядеть примерно так:

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

Но в реальных сценариях нам нужно обрабатывать гораздо больше вещей для лучшего взаимодействия с пользователем, например, обработку состояния игрока или удержание позиции поиска для возобновления.

Вот ссылка на репозиторий GitHub для примера, использованного в этой статье:

Резюме

На этом пока все. Надеюсь, вы узнали что-то новое. Давайте проверим расширенную обработку состояния, обработку потоковой передачи в реальном времени, улучшение пользовательского интерфейса, подобного Youtube, и т. Д. В моих следующих статьях. Будьте на связи!

использованная литература

• ExoPlaye
• Потоковое мультимедиа с ExoPlayer

Пожалуйста, оставьте мне свои предложения и комментарии.

Источник: design-hero.ru