选择播放模式

import React, {useRef} from 'react';
import {View, Text} from 'react-native';
import {VideoPlayer} from '@amazon-devices/react-native-w3cmedia';

export const App = () => {
  const audio = useRef<VideoPlayer | null>(new AudioPlayer());

  audio.current?.initialize().then(() => {
    audio.current!.autoplay = true;
    audio.current!.src = 'https://<流媒体服务器>.com/audio_only.mp3';
  });

  return (
    <View style={ {flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'black'}}>
      <Text style={ {color: 'white', fontSize: 18}}>音频播放</Text>
    </View>
  );
};

/*
 * 版权所有 (c) 2025 Amazon.com, Inc.或其关联公司。 保留所有权利。
 *
 * 专有/机密信息。 相关使用受许可条款的约束。
 */

import React, {useRef} from 'react';
import {View} from 'react-native';
import {
  VideoPlayer,
  KeplerVideoSurfaceView,
} from '@amazon-devices/react-native-w3cmedia';

export const App = () => {
  const video = useRef<VideoPlayer | null>(new VideoPlayer());

  const onSurfaceViewCreated = async (surfaceHandle: string) => {
    await video.current?.initialize();
    video.current?.setSurfaceHandle(surfaceHandle);
    video.current!.autoplay = true;
    video.current!.src = 'https://<流媒体服务器>.com/av.mp4';
  };

  const onSurfaceViewDestroyed = async (surfaceHandle: string) => {
    video.current?.clearSurfaceHandle(surfaceHandle);
    await video.current?.deinitialize();
    video.current = null;
  };

  return (
    <View style={{flex: 1}}>
      <KeplerVideoSurfaceView
        style={{flex: 1}}
        onSurfaceViewCreated={onSurfaceViewCreated}
        onSurfaceViewDestroyed={onSurfaceViewDestroyed}
      />
    </View>
  );
};

import React, {useRef} from 'react';
import {View} from 'react-native';
import {
  VideoPlayer,
  KeplerVideoSurfaceView,
  KeplerCaptionsView,
} from '@amazon-devices/react-native-w3cmedia';
import {ShakaPlayer, ShakaPlayerSettings} from './shakaplayer/ShakaPlayer';

const content = {
  secure: 'false',
  uri: 'https://<streaming server>.com/dash.mpd',
  drm_scheme: '',
  drm_license_uri: '',
};

const playerSettings: ShakaPlayerSettings = {
  secure: false,
  abrEnabled: true,
};

export const App = () => {
  const videoPlayer = useRef<VideoPlayer | null>(new VideoPlayer());
  const shakaPlayer = useRef<any>(null);

  const onSurfaceViewCreated = async (surfaceHandle: string) => {
    await videoPlayer.current?.initialize();
    videoPlayer.current?.setSurfaceHandle(surfaceHandle);
    videoPlayer.current!.autoplay = true;
    
    shakaPlayer.current = new ShakaPlayer(videoPlayer.current!, playerSettings);
    shakaPlayer.current.load(content, true);
  };

  const onSurfaceViewDestroyed = async (surfaceHandle: string) => {
    videoPlayer.current?.clearSurfaceHandle(surfaceHandle);
    shakaPlayer.current?.unload();
    shakaPlayer.current = null;
    await videoPlayer.current?.deinitialize();
    videoPlayer.current = null;
  };

  const onCaptionViewCreated = (captionsHandle: string) => {
    videoPlayer.current?.setCaptionViewHandle(captionsHandle);
  };

  return (
    <View style={ {flex: 1, backgroundColor: 'black'}}>
      <KeplerVideoSurfaceView
        style= { {flex: 1}}
        onSurfaceViewCreated={onSurfaceViewCreated}
        onSurfaceViewDestroyed={onSurfaceViewDestroyed}
      />
      <KeplerCaptionsView
        onCaptionViewCreated={onCaptionViewCreated}
        show={true}
        style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
          backgroundColor: 'transparent',
          zIndex: 2,
        }}
      />

    </View>
  );
};