A high-performance, interactive and customizable video player control, built upon Reanimated v2 & GestureHandler v2

Overview
`JSThread` to `JSThread`, `UIThread` to `UIThread`.

React Native Reanimated Expo Player

100% written in Typescript video player component, interaction is like Youtube player.

▶️ Watch example video

Installation

First you have to follow installation instructions of:

yarn add expo-reanimated-av-player

Example usage

import VideoPlayer from 'expo-reanimated-av-player';
import { useSharedValue } from 'react-native-reanimated';
export const Example = () => {
  const videoHeight = useSharedValue(0);
  const isFullScreen = useSharedValue(false);

  return (
    <VideoPlayer
      source={videoInfo.source}
      headerBarTitle={`fullscreen title`}
      onToggleAutoPlay={(state: boolean) => {
        console.log(`onToggleAutoPlay state: ${state}`);
      }}
      videoDefaultHeight={VIDEO_DEFAULT_HEIGHT}
      videoHeight={videoHeight}
      resizeMode="cover"
      isFullScreen={isFullScreen}
      onTapBack={() => {
        console.log('onTapBack');
      }}
      onTapMore={() => {
        console.log('onTapMore');
      }}
    />
  );
};

Features

  • 100% written in TypeScript.
  • 100% built upon react-native-reanimated and react-native-gusture-handler.
  • Support gestures switch full screen.
  • Support double tap seek to back or ahead.
  • ...

Configuration

The <VideoPlayer/> component has the following configuration properties:

Name Type Description Required Default Value
theme object The slider theme color { // Color to fill the progress in the seekbar minimumTrackTintColor: string, // Color to fill the background in the seekbar maximumTrackTintColor: string, // Color to fill the cache in the seekbar cacheTrackTintColor: string, // Color to fill the bubble backgroundColor disableMinTrackTintColor: string, // Disabled color to fill the progress in the seekbar bubbleBackgroundColor: string }
showOnStart boolean control view init show false
onEnterFullscreen function on enter fullscreen callback undefined
onExitFullscreen function on exit fullscreen callback undefined
controlTimeout nubmer How long to hide the control view after showing 2000
videoDefaultHeight number video default height screenWidth * (9 / 16)
headerBarTitle string header bar title on fullscreen mode undefined
onTapBack function tap header bar Icon-'Back' callback undefined
navigation any navigation undefined
autoPlay boolean auto play false
onToggleAutoPlay function on toggle auto play undefined
onTapMore function tap headerbar Icon-'More' callback undefined
doubleTapInterval number double tap interval undefined
paused boolean video paused undefined
onPausedChange boolean on change video paused undefined
onTapPause function on tap video paused undefined
sliderProps object react-native-awesome-slider props undefined
videoHeight Animated.SharedValue video height width * (9 / 16);
customAnimationStyle Animated Viewstyle video height width * (9 / 16);
onCustomPanGesture PanGesture custom pan gesture width * (9 / 16);
isFullScreen Animated ShareValue fullScreen status undefined
disableControl boolean control view status undefined
renderBackIcon JSX custom back icon undefined
renderFullScreenBackIcon JSX custom full's fullscreen icon undefined
renderMore JSX custom more icon undefined
renderFullScreen JSX custom fullscreen icon undefined
You might also like...

HTML5 audio or video player with support for MP4, WebM, and MP3 as well as HLS, Dash, YouTube, Facebook, SoundCloud and others with a common HTML5 MediaElement API, enabling a consistent UI in all browsers.

HTML5 <audio> or <video> player with support for MP4, WebM, and MP3 as well as HLS, Dash, YouTube, Facebook, SoundCloud and others with a common HTML5 MediaElement API, enabling a consistent UI in all browsers.

One file. Any browser. Same UI. Author: John Dyer http://j.hn/ Website: http://mediaelementjs.com/ License: MIT Meaning: Use everywhere, keep copyrigh

Jan 8, 2023

This is a simple web based media player for playing video and audio. Build with pure HTML, CSS and Javascript. No framework or library included.

Aim-Player This is a simple web based media player for playing video and audio. Build with pure HTML, CSS and Javascript. No framework or library incl

Jun 27, 2021

Resurrection of mediagroup / MediaController (renamed) which can be used to sync and control multiple audio / video elements.

media-group (examples) Resurrection of the mediagroup attribute and MediaController API (but renamed) which can be used to sync and control multiple a

Dec 15, 2022

Resurrection of mediagroup / MediaController (renamed) which can be used to sync and control multiple audio / video elements.

media-group (examples) Resurrection of the mediagroup attribute and MediaController API (but renamed) which can be used to sync and control multiple a

Aug 2, 2022

The HTML5 video player for the web

Flowplayer website | demos | docs For the impatient Download Flowplayer Unzip Drop the folder under your server Minimal setup !DOCTYPE html head

Dec 30, 2022

Modern browsers already had a vivid player for video

Modern browsers already had a vivid player for video

Modern browsers already had a vivid player for video. However, web developers and designers still want to custom their own style player for different situations. Sounds like web component will do a lot favor for this purpose. With msc-ez-video / support, customize control panel will become a piece of cake. msc-ez-video / adopts CSS custom properties, developers could style them as they want.

Dec 29, 2021

Custom full screen video player

Custom full screen video player

Video Player Native video player in html View Demo · Report Bug · Request Feature About The Project This is a custom video player for the web built on

Feb 3, 2022

Accessible HTML5 Video Player

Accessible HTML5 Video Player What is it? A lightweight HTML5 video player which includes support for captions and screen reader accessibility. For de

Jan 5, 2023

a video player framework aims to bring wonderful experience on browser

a video player framework aims to bring wonderful experience on browser

Chimee English | 中文 Introduction Chimee is a web video player created by the Qiwoo Team. It's based on the web video element. It supports multiple med

Dec 22, 2022
Comments
  • TypeError: null is not an object (evaluating 'safeGetViewManagerConfig('LottieAnimationView').Commands')

    TypeError: null is not an object (evaluating 'safeGetViewManagerConfig('LottieAnimationView').Commands')

    After installing the package and use it as same as the example in the Readme, I'm getting the following error:

    TypeError: null is not an object (evaluating 'safeGetViewManagerConfig('LottieAnimationView').Commands')
    
    This error is located at:
        in RCTView (created by View)
        in View (created by AnimatedComponent)
        in AnimatedComponent
        in AnimatedComponentWrapper (at LottieView.js:178)
        in RCTView (created by View)
        in View (at LottieView.js:177)
        in LottieView (created by ExpoAvPlayer)
        in RCTView (created by View)
        in View (created by AnimatedComponent(View))
        in AnimatedComponent(View)
        in Unknown (created by ExpoAvPlayer)
        in RCTView (created by View)
        in View (created by AnimatedComponent(View))
        in AnimatedComponent(View)
        in Unknown
        in RCTView (created by View)
        in View
        in Unknown
        in RCTView (created by View)
        in View (created by AnimatedComponent(View))
        in AnimatedComponent(View)
        in Unknown (created by ExpoAvPlayer)
        in RCTView (created by View)
        in View (created by AnimatedComponent(View))
        in AnimatedComponent(View)
        in Unknown (created by ExpoAvPlayer)
        in Wrap (created by AnimatedComponent(Wrap))
        in AnimatedComponent(Wrap)
        in Unknown (created by GestureDetector)
        in GestureDetector (created by ExpoAvPlayer)
        in ExpoAvPlayer (created by DisplayVideoScreen)
    

    According to the Lottie documentation, it is happening due to the non-linked Lottie. So do we need to link lottie-react-native manually? If so, can you please update the readme?

    opened by abdullahceylan 1
  • Unable to run with Expo 44

    Unable to run with Expo 44

    Hello, I'm following the installation instructions and trying to set up the provided Example component. I receive the error below, seems renimated related, have you run into this?

    TypeError: this.InnerNativeModule.configureProps is not a function. (In 'this.InnerNativeModule.configureProps(uiProps, nativeProps)', 'this.InnerNativeModule.configureProps' is undefined)
    at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in registerError  
    at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl       
    at node_modules\react-native\Libraries\LogBox\LogBox.js:34:4 in console.error   
    at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error    
    at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
    at node_modules\react-native\Libraries\Core\ExceptionsManager.js:172:19 in handleException
    at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
    at node_modules\@react-native\polyfills\error-guard.js:49:36 in ErrorUtils.reportFatalError
    at node_modules\metro-runtime\src\polyfills\require.js:204:6 in guardedLoadModule
    at http://192.168.1.22:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:274417:3 in global code
    
    Invariant Violation: "main" has not been registered. This can happen if:
    * Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
    * A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
    at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in registerError  
    at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl       
    at node_modules\react-native\Libraries\LogBox\LogBox.js:34:4 in console.error   
    at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error    
    at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
    at node_modules\react-native\Libraries\Core\ExceptionsManager.js:172:19 in handleException
    at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
    at node_modules\@react-native\polyfills\error-guard.js:49:36 in ErrorUtils.reportFatalError
    at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:367:8 in __guard
    at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:4 in callFunctionReturnFlushedQueue
    

    babel.config.js:

    module.exports = function (api) {
      api.cache(true);
      return {
        presets: ["babel-preset-expo"],
        plugins: ["react-native-reanimated/plugin"],
      };
    };
    

    VideoScreen.tsx

    import * as React from "react";
    import { Dimensions, StyleSheet } from "react-native";
    import VideoPlayer from "expo-reanimated-av-player";
    import { SafeAreaView } from "react-native-safe-area-context";
    import { useSharedValue } from "react-native-reanimated";
    import { StackScreenProps } from "@react-navigation/stack";
    import { UserStackParamList } from "../navigation/UserStack";
    
    const width = Dimensions.get("window").width;
    const VIDEO_DEFAULT_HEIGHT = width;
    
    type Props = StackScreenProps<UserStackParamList, "Video">;
    
    const VideoScreen: React.FC<Props> = ({ navigation }) => {
      const videoHeight = useSharedValue(0);
      const isFullScreen = useSharedValue(false);
    
      return (
        <SafeAreaView style={styles.container}>
          <VideoPlayer
            source={{ uri: "YOUTUBE_URL_HERE" }}
            headerBarTitle={`fullscreen title`}
            onToggleAutoPlay={(state: boolean) => {
              console.log(`onToggleAutoPlay state: ${state}`);
            }}
            videoDefaultHeight={VIDEO_DEFAULT_HEIGHT}
            videoHeight={videoHeight}
            resizeMode="cover"
            isFullScreen={isFullScreen}
            onTapBack={() => {
              console.log("onTapBack");
            }}
            onTapMore={() => {
              console.log("onTapMore");
            }}
          />
        </SafeAreaView>
      );
    };
    
    export default VideoScreen;
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
      },
    });
    

    package.json deps

     "dependencies": {
        "@react-native-async-storage/async-storage": "~1.15.0",
        "@react-navigation/native": "^6.0.8",
        "@react-navigation/stack": "^6.1.1",
        "dotenv": "^16.0.0",
        "expo": "~44.0.0",
        "expo-av": "~10.2.0",
        "expo-constants": "~13.0.1",
        "expo-keep-awake": "~10.0.1",
        "expo-reanimated-av-player": "^0.2.0",
        "expo-status-bar": "~1.2.0",
        "firebase": "^9.6.10",
        "react": "17.0.1",
        "react-dom": "17.0.1",
        "react-native": "0.64.3",
        "react-native-elements": "^3.4.2",
        "react-native-gesture-handler": "~2.1.0",
        "react-native-reanimated": "~2.3.1",
        "react-native-safe-area-context": "3.3.2",
        "react-native-web": "0.17.1"
      },
      "devDependencies": {
        "@babel/core": "^7.12.9",
        "@types/react": "~17.0.21",
        "@types/react-native": "~0.64.12",
        "typescript": "~4.3.5"
      },
    
    opened by frankcalise 8
Releases(v0.2.0)
Owner
Alan Toa
Nothing is more fun than code. 🚀
Alan Toa
SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc.

SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc.

ossrs 12 Oct 15, 2022
Video.js - open source HTML5 & Flash video player

Video.js - HTML5 Video Player Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and Media Source Ext

Video.js 34.8k Jan 5, 2023
High-quality Interactive Audio/Video Electron SDK

实时音视频(TRTC)Electron 版 SDK 实时音视频(TRTC)Electron 版 SDK 包含实时音视频和直播能力。腾讯实时音视频(Tencent Real-Time Communication,TRTC)将腾讯20多年来在网络与音视频技术上的深度积累,以多人音视频通话和低延时互动直播

LiteAVSDK 14 Jan 6, 2023
High-quality Interactive Audio/Video Uni-app SDK

如何使用 步骤一:注册并创建 uni-app 账号 搭建 App 开发环境步骤如下: 下载 HBuilderX 编辑器 。 项目中 HBuilderX 目前使用的最新版本,如果此前下载过 HBuilderX,为保证开发环境统一请更新到最新版本。 DCloud 开发者中心注册 之后登录 HBuilde

LiteAVSDK 19 Dec 20, 2022
Music-Player - Music player application built with HTML, CSS and vanilla JavaScript

Music-Player Music player application built with HTML, CSS and vanilla JavaScrip

Karthik Umashankar 1 Feb 10, 2022
DownTube is a free to use - Content downloader service that works upon YouTube based open source APIs. It is developed and handled by M30.

?? DownTube 3.1.7 DownTube is a free to use - Content downloader service that works upon YouTube based open source APIs. It is developed and handled b

Dev Anand 1 Sep 5, 2022
A web video player built for the HTML5 world using React library.

video-react Video.React is a web video player built from the ground up for an HTML5 world using React library. Installation Install video-react and pe

null 2.4k Jan 6, 2023
An online stem player. Inspired by but not affiliated with YEEZY TECH X KANO Stem Player.

Stem Player Online An online stem player. Inspired by but not affiliated with YEEZY TECH X KANO Stem Player. https://stemplayeronline.com See the proj

Luke Weiler 23 Nov 13, 2022
High-quality* music player.

Laudiolin A very simple music player written in TypeScript using Tauri and React. pronounced eL-auDiO-liN Running Clone the project run npm i run npm

null 12 Dec 21, 2022
HTML5

One file. Any browser. Same UI. Author: John Dyer http://j.hn/ Website: http://mediaelementjs.com/ License: MIT Meaning: Use everywhere, keep copyrigh

MediaElement.js 8k Dec 27, 2022