ReactNative — react-native-video реализует полноэкранное воспроизведение видео

react-native-videoЭто компонент на github, посвященный React Native для воспроизведения видео. Этот компонент является самым функциональным и самым полезным компонентом воспроизведения видео на React Native. Он все еще находится в стадии разработки. Хотя все еще есть некоторые ошибки, но в основном это не влияет на использование. Настоятельно рекомендуется.

В этой статье в основном рассказывается, как использовать react-native-video для воспроизведения видео и как добиться полноэкранного воспроизведения.При повороте экрана размер видеоплеера соответствующим образом настраивается, и отображается или сворачивается полный экран.

Во-первых, давайте посмотрим, какие функции есть у react-native-video.

основные навыки

контролировать скорость воспроизведения
громкость управления
Поддержка функции отключения звука
Поддержка воспроизведения и паузы
Поддержка воспроизведения фонового звука
Поддержка пользовательских стилей, таких как установка ширины и высоты
Вызовы расширенных событий, таких как onLoad, onEnd, onProgress, onBuffer и т. д., можно настроить в пользовательском интерфейсе с помощью соответствующих событий. Например, при onBuffer мы можем отобразить индикатор выполнения, чтобы напомнить пользователю о буферизации видео.
Для поддержки полноэкранного воспроизведения используйте метод presentFullscreenPlayer. Этот метод работает на iOS, но не работает на Android. видетьissue#534, #726 та же проблема.
Поддержка Jump Progress, используйте метод поиска, чтобы перейти в указанное место для воспроизведения
Адрес удаленного видео может быть загружен для воспроизведения, или может быть загружено видео, сохраненное локально RN.

Меры предосторожности

react-native-video устанавливает видео через свойство источника и использует uri для установки адреса видео при воспроизведении удаленного видео следующим образом:

source={{uri: "http://www.xxx.com/xxx/xxx/xxx.mp4"}}

При воспроизведении локального видео использование происходит следующим образом:

source={require('../assets/video/turntable.mp4')}

Следует отметить, что атрибут источника не может быть пустым, а uri или локальные ресурсы должны быть установлены, иначе приложение вылетит. uri не может быть пустой строкой, это должен быть определенный адрес.

Конфигурация установки

использоватьnpm i -S react-native-videoилиyarn add react-native-videoУстановка, после завершенияreact-native link react-native-videoКоманда для связывания этой библиотеки.

После того, как сторона Android выполнит команду link, конфигурация будет завершена в gradle. Сторону iOS также необходимо настроить вручную. Вот краткое описание. В отличие от официальных инструкций, мы обычно не используем tvOS. Выберите свою собственную цель и удалите автоматическую ссылку на этапах сборки.libRCTVideo.aэту библиотеку, затем щелкните знак плюса ниже, чтобы повторно добавитьlibRCTVideo.a, будьте осторожны, чтобы не выбрать неправильный.

проигрывание видео

На самом деле реализовать воспроизведение видео очень просто: нам нужно только установить исходный ресурс для компонента «Видео», а затем задать стиль для настройки ширины и высоты компонента «Видео».

<Video
    ref={(ref) => this.videoPlayer = ref}
    source={{uri: this.state.videoUrl}}
    rate={1.0}
    volume={1.0}
    muted={false}
    resizeMode={'cover'}
    playWhenInactive={false}
    playInBackground={false}
    ignoreSilentSwitch={'ignore'}
    progressUpdateInterval={250.0}
    style={{width: this.state.videoWidth, height: this.state.videoHeight}}
/>

Где videoUrl — это переменная, которую мы используем для установки адреса видео, а videoWidth и videoHeight используются для управления шириной и высотой видео.

Реализация полноэкранного воспроизведения

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

Выше мы сохраняем videoWidth и videoHeight в состоянии, цель состоит в том, чтобы обновить пользовательский интерфейс, изменив значения двух переменных, чтобы можно было соответствующим образом изменить ширину и высоту видео. Вопрос, как получить измененную ширину и высоту во времени при повороте экрана устройства?

Когда видео находится в портретной ориентации, начальная ширина видео, которую я задаю, равна ширине экрана устройства, а высота составляет 9/16 ширины, то есть отображается в соотношении 16:9. В альбомной ориентации ширина видео должна быть равна ширине экрана, а высота должна быть высотой текущего экрана. Поскольку ширина и высота устройства изменились, когда экран расположен горизонтально, пользовательский интерфейс может быть обновлен вовремя, когда ширина и высота будут получены вовремя, и видео может отображаться в полноэкранном режиме.

Первое, о чем я подумал, это использоватьreact-native-orientationПрослушайте событие поворота экрана устройством и оцените, является ли текущий экран горизонтальным или вертикальным в методе обратного вызова.Это возможно на iOS, но значения ширины и высоты, полученные, когда экран горизонтален и вертикальен на Android всегда не совпадают (например, ширина экрана по горизонтали 384, высота 582, ширина экрана по вертикали 582, высота 384, очевидно, необоснованно), поэтому с этим нельзя обращаться единообразно.

Следовательно, решение мониторинга поворота экрана неосуществимо, и оно не только требует много времени, но и дает желаемые результаты. Лучшее решение — использовать View в качестве самого нижнего контейнера в функции рендеринга, установить для него стиль «flex: 1», чтобы он заполнил экран, и получить его ширину и высоту в методе onLayout View. Независимо от того, как повернут экран, onLayout может получить ширину, высоту и координаты x и y текущего представления.

/// 屏幕旋转时宽高会发生变化，可以在onLayout的方法中做处理，比监听屏幕旋转更加及时获取宽高变化
  _onLayout = (event) => {
    //获取根View的宽高
    let {width, height} = event.nativeEvent.layout;
    console.log('通过onLayout得到的宽度：' + width);
    console.log('通过onLayout得到的高度：' + height);
    
    // 一般设备横屏下都是宽大于高，这里可以用这个来判断横竖屏
    let isLandscape = (width > height);
    if (isLandscape){
      this.setState({
        videoWidth: width,
        videoHeight: height,
        isFullScreen: true,
      })
    } else {
      this.setState({
        videoWidth: width,
        videoHeight: width * 9/16,
        isFullScreen: false,
      })
    }
  };

Таким образом, при повороте экрана видео также будет изменяться в размере, при горизонтальном положении экрана оно будет воспроизводиться в полноэкранном режиме, а при вертикальном — вернется к обычному воспроизведению. Обратите внимание, что Android и iOS должны настроить функцию поворота экрана для автоматического поворота интерфейса. Пожалуйста, проверьте соответствующие методы настройки самостоятельно.

элементы управления воспроизведением

Недостаточно реализовать полноэкранное воспроизведение выше, нам также нужна панель инструментов для управления воспроизведением видео, например, показ прогресса, пауза воспроизведения и полноэкранные кнопки. Конкретные идеи заключаются в следующем:

Используйте View, чтобы обернуть компонент Video.Ширина и высота View такие же, как и у Video, что удобно для изменения размера при повороте экрана.
Установите прозрачный слой-маску, чтобы закрыть компонент «Видео», нажмите на слой-маску, чтобы отобразить или скрыть панель инструментов.
На панели инструментов должны отображаться кнопка воспроизведения, индикатор выполнения, кнопка полноэкранного режима, текущее время воспроизведения и общая продолжительность видео. Панель инструментов расположена в абсолютном положении, закрывая нижнюю часть компонента «Видео».
Используйте методы lockToPortrait и lockToLandscape в react-native-orientation, чтобы принудительно повернуть экран, и используйте unlockAllOrientations, чтобы отменить ограничения на поворот экрана после поворота экрана.

Это достойный видеоплеер. Ниже приведены рендеры портретных и ландшафтных экранов.

Не нужно беспокоиться о том, что метод presentFullscreenPlayer больше не работает, полноэкранное воспроизведение на самом деле очень просто реализовать. См. демо для конкретного кода:GitHub.com/Nobody Arron at/Hot….

Суммировать

React-native-orientation и react-native-video являются дефектами, но их можно использовать для использования в проекте.
Иногда необходимо изменить способ мышления, чтобы решить проблему, а не висеть на дереве. Сядьте и выпейте чашку чая, измените свое мышление, измените ключевые слова для поиска, возможно, вы получите ответ, который хотите.