5

I'm currently trying to implement videos from a number of sources into a learning app built with Expo and ReactNative.

I want to include video sources from:

  • YouTube
  • Vimeo
  • Microsoft Stream
  • Custom .mp4 link

I have tried to use WebView in the following configuration:

<WebView
  ref={videoRef}
  onContentProcessDidTerminate={() => videoRef?.current?.reload()}
  javaScriptEnabled={true}
  sharedCookiesEnabled={true}
  scrollEnabled={false}
  allowsFullscreenVideo={true}
  //allowsInlineMediaPlayback={true}
  renderLoading={() => <ActivityIndicator />}
  renderError={() => <Text>An error occurred.</Text>}
  userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36"
  source={{
    uri: src,
  }}
  mediaPlaybackRequiresUserAction={true}
/>

The experience must be seamless on Android and iOS while allowing for device rotation. When a user starts a video in portrait mode and rotates the device, I need the video to continue playing seamlessly like the YouTube app for instance.

Currently, I am facing the issue, that my solution does not work when rotating the screen. The video stops and the player is closed, the video paused. The orientation then locks back to portrait mode (which is the desired rotation for the app). I have also tried to ScreenOrientation.unlockAsync() but I am still facing the same issue. Same thing with using <Video /> from expo-av.

Recapping, some core requirements are:

  • The video also needs to be manually started and shall not start on its own.
  • Allow for full device-rotational freedom
  • Must not stop when rotating the device
  • Must work inline and full-screen
  • Must allow for multiple sources
  • Must work with Android and iOS

How does one go about accomplishing something like that?

starball
  • 20,030
  • 7
  • 43
  • 238
Christian Aichner
  • 366
  • 3
  • 18
  • 1
    I think you should determine what's the link source and then use the related Component, eg: `react-native-youtube` for YouTube, `react-native-vimeo-iframe` for Vimeo and etc, for custom MP4 it's better to be used `react-native-video`. – AmerllicA Mar 01 '23 at 11:05
  • Yeah, that sounds like a good base idea, but this does not solve the main issue I am facing - the seamless fullscreen experience. :) – Christian Aichner Mar 01 '23 at 17:18

1 Answers1

0

You can use Amazon IVS Player for react native: [https://github.com/aws/amazon-ivs-react-native-player][1]. Its a very minimalist video player out of the box, so all the basic functionality you require would have to be implemented by the you, like rotation, autoplay, pause/continue etc. But on flip side, it can be programmed to do anything you need it to do. Plus its not a webview.

Parvez
  • 129
  • 1
  • 7