# Stream media to a channel (/en/realtime-media/broadcast-streaming/build/manage-video-and-streaming/play-media/react-native)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

Playing media files during online business presentations, educational sessions, or casual meetups heightens user engagement. Video SDK enables you to add media playing functionality to your app.

    This page shows you how to use media player-related APIs to play local or online media resources with remote users in Broadcast Streaming channels.

    ## Understand the tech [#understand-the-tech-5]

    To play a media file in a channel, you open the file using a media player instance. When the file is ready to be played, you set up the local video container to display the media player output. You update channel media options to start publishing the media player stream, and stop publishing the camera and microphone streams. The remote user sees the camera and microphone streams of the media publishing user replaced by media streams.

    **Media player flow**

    ![Media player](https://assets-docs.agora.io/images/video-sdk/play-media.svg)

    ## Prerequisites [#prerequisites-5]

    Ensure that you have implemented the [SDK quickstart](../../index) in your project.

    ## Implement the logic [#implement-the-logic-5]

    To implement a media player in your app, follow these steps:

    1. Initialize `IRtcEngine` and create an `IMediaPlayer` object:

       ```typescript
       // Create and initialize the engine
       let rtcEngine = createAgoraRtcEngine();
       rtcEngine.initialize({
        appId,
       });
       // Create a media player object
       let mediaPlayer = rtcEngine.createMediaPlayer();
       ```

    2. Register the playback observer using `registerPlayerSourceObserver`.

       ```typescript
       // Register playback observer
       mediaPlayer.registerPlayerSourceObserver(this);
       ```

    3. Register media player observer callbacks based on your needs:

       * `onPlayerSourceStateChanged`: Reports player state changes.
       * `onPositionChanged`: Reports playback progress.
       * `onPlayerEvent`: Reports player events.

       ```js
       const EventHandles = {
         // Report player state change
         onPlayerSourceStateChanged: (state, ec) => {
           console.log(`state: ${state}, ec: ${ec}`);
         },

         // Report current media file playback progress
         onPositionChanged: (position) => {
           console.log(`position: ${position}`);
         },

         // Report player event
         onPlayerEvent: (eventCode, elapsedTime, message) => {
           console.log(
             `eventCode: ${eventCode}, elapsedTime: ${elapsedTime}, message: ${message}`
           );
         }
       };

       // Register main callback events
       rtcEngine.registerEventHandler(EventHandles);
       ```

    4. Open a media file:

       ```typescript
       open = () => {
         const url = 'https://example/video.mov';

         if (!url) {
           this.error("url is invalid");
           return;
         }

         mediaPlayer.open(url, 0);
       };
       ```

    5. Play and control media playback:

       ```typescript
       // Play the media file
       play = () => {
         const { position, duration } = this.state;
         if (position === duration && duration !== 0) {
           mediaPlayer.seek(0); // If playback is at the end, seek to the start
         } else {
           mediaPlayer.play(); // Otherwise, play the media
         }
       };

       // Pause the media file
       pause = () => {
         mediaPlayer.pause(); // Pause playback
       };

       // Resume the media file
       resume = () => {
         mediaPlayer.resume(); // Resume playback
       };
       ```

    6. Stop playback and release resources:

       ```typescript
       // Stop playing
       mediaPlayer.stop();
       // Destroy the media player
       rtcEngine.destroyMediaPlayer(this.player);
       // Unregister the playback observer
       rtcEngine.unregisterEventHandler(this);
       ```

    ## Reference [#reference-5]

    This section contains content that completes the information on this page, or points you to documentation that explains other aspects to this product.

    ### Sample project [#sample-project-5]

    Agora provides an open source [MediaPlayer](https://github.com/AgoraIO-Extensions/react-native-agora/blob/main/example/src/examples/advanced/MediaPlayer/MediaPlayer.tsx) sample project on GitHub. Download it or view the source code for a more detailed example.

    ### API reference [#api-reference-5]

    * [`createMediaPlayer`](https://api-ref.agora.io/en/video-sdk/react-native/4.x/API/class_irtcengine.html#api_irtcengine_createmediaplayer)
    * [`registerPlayerObserver`](https://api-ref.agora.io/en/video-sdk/react-native/4.x/API/class_imediaplayer.html#api_imediaplayer_registerplayersourceobserver)
    * [`onPlayerStateChanged`](https://api-ref.agora.io/en/video-sdk/react-native/4.x/API/class_imediaplayersourceobserver.html#callback_imediaplayersourceobserver_onplayersourcestatechanged)
    * [`onPositionChanged`](https://api-ref.agora.io/en/video-sdk/react-native/4.x/API/class_imediaplayersourceobserver.html#callback_imediaplayersourceobserver_onpositionchanged)
    * [`getMediaPlayerId`](https://api-ref.agora.io/en/video-sdk/react-native/4.x/API/class_imediaplayer.html#api_imediaplayer_getmediaplayerid)
    * [`open`](https://api-ref.agora.io/en/video-sdk/react-native/4.x/API/class_imediaplayer.html#api_imediaplayer_open)
    * [`play`](https://api-ref.agora.io/en/video-sdk/react-native/4.x/API/class_imediaplayer.html#api_imediaplayer_play)
    * [`pause`](https://api-ref.agora.io/en/video-sdk/react-native/4.x/API/class_imediaplayer.html#api_imediaplayer_pause)
    * [`stop`](https://api-ref.agora.io/en/video-sdk/react-native/4.x/API/class_imediaplayer.html#api_imediaplayer_stop)
    * [`unRegisterPlayerObserver`](https://api-ref.agora.io/en/video-sdk/react-native/4.x/API/class_imediaplayer.html#api_imediaplayer_unregisterplayersourceobserver)