В предыдущей статье я представил библиотеку react-native-video и использовал ее для реализации демонстрации полноэкранного воспроизведения, которая в основном объясняла принцип полноэкранного воспроизведения. В этой статье я переписываю простое приложение для видеоплеера на основе предыдущей работы, чтобы поделиться и обобщить мой личный опыт.
Пользовательский интерфейс проигрывателя относится к основным проигрывателям, таким как Tencent Video и iQiyi, и в основном реализован со ссылкой на Tencent Video. Эффект следующий:
Этот плеер поддерживает следующие функции:
- Загружаемые локальные и удаленные адреса видео
- Поддержка воспроизведения и паузы
- Поддержка горизонтального и вертикального переключения экрана
- Отображать название видео в альбомной ориентации
- функция отключения звука
- Поддержка переключения выбора видео
- Переключение ландшафтного разрешения
- Горизонтальное отображение экрана и совместное использование
- отрегулировать громкость
- Отрегулируйте скорость воспроизведения
- Совместимость с iPhone X
сторонняя библиотека
В основном используются три библиотеки, первые две необходимы для реализации функции плеера, а библиотека навигации необязательна.
Эта библиотека используется в настоящее время. Сначала я увидел, что многие люди спрашивают, как реализовать полноэкранное воспроизведение, потому что presentFullscreenPlayer не поддерживает Android.После исследования этой библиотеки я придумал решение, которое представляет собой процесс реализации, о котором я упоминал в прошлой статье. Несмотря на то, что у этого видеоплеера все еще много проблем, его все еще можно использовать, и ни один пакетный проигрыватель React Native не оказался намного лучше, чем этот. Если вам нужна лучшая производительность и эффекты, лучше всего реализовать и инкапсулировать его самостоятельно на основе нативного.
Может принудительно поворачивать экран, мониторить поворот экрана, прост в использовании.
Излишне говорить, что нативная навигационная библиотека React, реализованная на JS, очень удобна и проста в использовании. Существует много нативных навигационных библиотек React, и решения тоже хороши, в зависимости от личных предпочтений.
Краткое изложение деталей
- Использование CSS и flexbox layout, при необходимости используйте абсолютный метод для установки абсолютной позиции элемента управления.
- При изменении ширины и высоты проигрывателя для полноэкранного режима также необходимо изменить ширину и высоту некоторых элементов управления для нормального отображения.
- использовать
OrientationПринудительный поворот экрана. - использовать
BackHandlerСледите за щелчком физической клавиши возврата Android, нажмите клавишу возврата под горизонтальным экраном, чтобы вернуться к вертикальному экрану, и снова нажмите клавишу возврата, чтобы вернуться к предыдущему интерфейсу. -
DeviceInfoизisIPhoneX_deprecatedСвойство можно использовать, чтобы определить, является ли это iPhone X. На устройствах, отличных от iPhone X, это значение не определено. Из этого имени атрибута видно, что этот атрибут больше нельзя использовать в будущем, рекомендуется использовать стороннийreact-native-device-info чтобы получить информацию об устройстве, а затем принять решение. - Для адаптации iPhone X челка должна быть опущена при полноэкранном воспроизведении, чтобы не закрывать часть области челкой.Чтобы сделать пространство одинаковой ширины по обе стороны от левой и правой симметрии, ширина — это высота челки, то есть высота строки состояния под iPhone X — 44.
- При обращении к видеопроигрывателю в рендере обратите внимание на уровень элементов управления.Элементы управления, отображаемые в верхней части слоя пользовательского интерфейса, упоминаются в коде последними, что ничем не отличается от нативного пользовательского интерфейса.
- В любом приложении, чем больше элементов управления на уровне пользовательского интерфейса, тем больше накладных расходов это неизбежно приведет к загрузке.Хотя мы можем не чувствовать влияния из-за повышения производительности устройства, его все же следует избегать в процессе разработки. Здесь также необходимы улучшения в этом приложении.
TODO
- Функция скриншота видео
- Улучшите код компонента пользовательского интерфейса, чтобы уменьшить связанность
- Пейзаж может блокировать управление вращением и воспроизведением
Кодовый адрес:GitHub.com/Nobody Arron at/Hot…/Chapter8-Мое видеоприложение/MyVideoApp. Если вам это нравится, пожалуйста, дайте ему звезду, спасибо за внимание.