Share this
Introducing Picture-in-Picture for the THEOplayer React Native SDK!
by Bart Van Oosterhout on March 13, 2023
Background on React Native and THEOplayer
React Native allows you to develop fully in Javascript, without having to learn or have previous experience with native platforms. That being said, when porting your video pipeline cross-platform with React Native, many media & entertainment companies run into native development for premium features or connectors with third-party DRM, analytics and ad insertion solutions, which means that they still require separate engineering teams for iOS and Android development.
It’s our mission at THEO to truly make it possible to develop only in Javascript when launching premium video playback experiences with THEOplayer; so that you can save time, and money, building and maintaining your React Native video apps cross-platform.
Which is why we are excited to announce that our THEOplayer React Native SDK now supports Picture-in-Picture (PiP) mode across Web, Android and iOS based platforms, providing users with even more flexibility and control over their video experience.
What is Picture-in-Picture? (PiP)
Picture-in-Picture allows viewers to watch videos in a small floating window that can be moved around the screen while still allowing them to interact with other apps or browse through content. With the PiP feature, users can multitask while watching their favorite videos, giving them an unprecedented level of convenience and flexibility.
Here's a step-by-step guide on how to use the new Picture-in-Picture feature in THEOplayer for React Native:
Step 1
Import THEOplayer SDK into your React Native project using the following command:
npm install react-native-theoplayer |
Step 2
Import the THEOplayerView component into your React Native project and initialize it with your preferred video source:
import { THEOplayerView } from 'react-native-theoplayer'; const onPiPToggle = () => { }; |
Step 3
Set up button or gesture recognizer that triggers the presentation mode change on the THEOplayer instance.
const onPiPToggle = () => { |
And there you have it! With just a few lines of code, you're now able to add the Picture-in-picture mode to your video app using the THEOplayer React Native SDK.
Visit our React Native’s developer’s portal, or get in touch to learn more about how to get started with THEOplayer in your React Native app.
We’ll continue to develop additional features and connectors for our THEOplayer React Native SDK, so stay tuned for further updates!
Share this
- THEOplayer (41)
- online streaming (36)
- low latency (28)
- live streaming (27)
- HESP (22)
- video streaming (22)
- HLS (19)
- new features (19)
- SDK (18)
- html5 player (16)
- cross-platform (15)
- online video (14)
- THEO Technologies (12)
- THEOlive (12)
- LL-HLS (11)
- MPEG-DASH (11)
- best video player (11)
- partnership (11)
- Tizen (10)
- awards (10)
- content monetisation (10)
- delivering content (10)
- latency (10)
- SmartTV (9)
- fast zapping (9)
- video codec (9)
- Big Screen (8)
- Samsung (8)
- Adobe flash (7)
- High Efficiency Streaming Protocol (7)
- Streaming Media Readers' Choice Awards (7)
- Ultra Low Latency (7)
- WebOS (7)
- advertising (7)
- html5 (7)
- innovation (7)
- low bandwidth (7)
- Apple (6)
- Efficiency (6)
- Events (6)
- SSAI (6)
- Bandwidth Usage (5)
- CDN (5)
- Deloitte (5)
- LG (5)
- Online Advertising (5)
- adaptive bitrate (5)
- nomination (5)
- release (5)
- roku (5)
- viewers expercience (5)
- AV1 (4)
- CMAF (4)
- DVR (4)
- HTTP (4)
- Update (4)
- ad revenue (4)
- case study (4)
- fast 50 (4)
- google (4)
- streaming media west (4)
- support matrix (4)
- ABR (3)
- Chrome (3)
- H.265 (3)
- HESP Alliance (3)
- HEVC (3)
- IBC (3)
- IBC trade show (3)
- THEO Technologies Partner Success Team (3)
- THEOplayer Partner Success Team (3)
- Year Award (3)
- content encryption (3)
- content protection (3)
- customer case (3)
- customise feature (3)
- drm (3)
- dynamic ad insertion (3)
- monetization (3)
- reduce buffering (3)
- scalable (3)
- sports betting (3)
- sports streaming (3)
- video monetization (3)
- "content delivery" (2)
- "network api" (2)
- AES-128 (2)
- Amino Technologies (2)
- Android TV (2)
- CSI Awards (2)
- Cost Efficient (2)
- Encoding (2)
- Encryption (2)
- FireTV (2)
- H.264 (2)
- MPEG (2)
- Microsoft Silverlight (2)
- Press Release (2)
- React Native SDK (2)
- Start-Up Times (2)
- UI (2)
- VMAP (2)
- VOD (2)
- VP9 (2)
- VPAID2.0 (2)
- adobe (2)
- ads in HTML5 (2)
- analytics (2)
- android (2)
- captions (2)
- chromecast (2)
- chromecast support (2)
- client-side ad insertion (2)
- clipping (2)
- closed captions (2)
- content integration (2)
- deloitte rising star (2)
- fast500 (2)
- frame accurate clipping (2)
- frame accurate seeking (2)
- interactive video (2)
- metadata (2)
- multiple audio (2)
- nab show (2)
- playback speed (2)
- plugin-free (2)
- pricing (2)
- server-side ad replacement (2)
- subtitles (2)
- video (2)
- video content (2)
- video publishers (2)
- video trends (2)
- viewer experience (2)
- "smooth playback" (1)
- 360 Video (1)
- AOM (1)
- API (1)
- BVE (1)
- Best of Show (1)
- CEA-608 (1)
- CEA-708 (1)
- CORS (1)
- DIY (1)
- Edge (1)
- FCC (1)
- HLS stream (1)
- Hudl (1)
- LCEVC (1)
- LHLS (1)
- LL-DASH (1)
- Microsoft Azure Media Services (1)
- Monoscopic (1)
- NAB Show 2016 (1)
- NPM (1)
- NetOn.Live (1)
- OMID (1)
- Periscope (1)
- React Native (1)
- Real-time (1)
- SIMID (1)
- Scale Up of the Year award (1)
- Seeking (1)
- Stereoscopic (1)
- Swisscom (1)
- TVB Europe (1)
- Tech Startup Day (1)
- Telenet (1)
- Uncategorized (1)
- University of Manitoba (1)
- User Interface (1)
- VAST (1)
- VPAID (1)
- VR (1)
- VR180 (1)
- Vivaldi support (1)
- Vualto (1)
- ad block detection (1)
- ad blocking (1)
- adblock detection (1)
- apple tv (1)
- audio (1)
- autoplay (1)
- cloud (1)
- facebook html5 (1)
- faster ABR (1)
- fmp4 (1)
- hiring (1)
- iGameMedia (1)
- iOS (1)
- iOS SDK (1)
- iPadOS (1)
- id3 (1)
- language localisation (1)
- micro moments (1)
- mobile ad (1)
- new web browser (1)
- offline playback (1)
- preloading (1)
- program-date-time (1)
- seamless transition (1)
- server-side ad insertion (1)
- stream problems (1)
- streaming media east (1)
- support organization (1)
- thumbnails (1)
- use case (1)
- video clipping (1)
- video recording (1)
- video trends in 2016 (1)
- visibility (1)
- vulnerabilities (1)
- webRTC (1)
- wowza (1)
- zero-day exploit (1)
- September 2023 (1)
- July 2023 (2)
- June 2023 (1)
- April 2023 (4)
- March 2023 (2)
- December 2022 (1)
- September 2022 (4)
- July 2022 (1)
- June 2022 (3)
- April 2022 (1)
- March 2022 (1)
- January 2022 (1)
- November 2021 (1)
- October 2021 (3)
- September 2021 (3)
- July 2021 (1)
- June 2021 (1)
- May 2021 (4)
- April 2021 (4)
- March 2021 (6)
- February 2021 (8)
- January 2021 (4)
- December 2020 (1)
- November 2020 (2)
- October 2020 (1)
- September 2020 (2)
- August 2020 (1)
- July 2020 (3)
- June 2020 (3)
- May 2020 (1)
- April 2020 (3)
- March 2020 (3)
- February 2020 (1)
- January 2020 (3)
- December 2019 (3)
- November 2019 (3)
- October 2019 (1)
- September 2019 (4)
- August 2019 (1)
- June 2019 (1)
- December 2018 (1)
- November 2018 (3)
- October 2018 (1)
- August 2018 (4)
- July 2018 (2)
- June 2018 (2)
- April 2018 (1)
- March 2018 (3)
- February 2018 (2)
- January 2018 (2)
- December 2017 (1)
- November 2017 (1)
- October 2017 (1)
- September 2017 (2)
- August 2017 (3)
- May 2017 (3)
- April 2017 (1)
- March 2017 (1)
- February 2017 (1)
- December 2016 (1)
- November 2016 (3)
- October 2016 (2)
- September 2016 (4)
- August 2016 (3)
- July 2016 (1)
- May 2016 (2)
- April 2016 (4)
- March 2016 (2)
- February 2016 (4)
- January 2016 (2)
- December 2015 (1)
- November 2015 (2)
- October 2015 (5)
- August 2015 (3)
- July 2015 (1)
- May 2015 (1)
- March 2015 (2)
- January 2015 (2)
- September 2014 (1)
- August 2014 (1)