react-native-video中文文档 - 属性篇

4,532 阅读13分钟

allowsExternalPlayback

Indicates whether the player allows switching to external playback mode such as AirPlay or HDMI.
指示播放器是否允许切换到外部播放模式,如:AirPlay和HDMI

  • true(default):允许切换
  • false:不允许切换
平台: IOS

audioOnly

Indicates whether the player should only play the audio track and instead of displaying the video track, show the poster instead.
指示播放器只显示音频,并且用海报来代替视频显示。

  • false(default):正常显示视频
  • true:播放音频时显示海报,当前情况下poster属性必须设置
平台: ALL

automaticallyWaitsToMinimizeStalling

A Boolean value that indicates whether the player should automatically delay playback in order to minimize stalling. For clients linked against iOS 10.0 and later
一个布尔值,为了最小化暂停而指示播放器是否自动延迟播放。客户端支持IOS10.0及以上。

  • false: 立即开始播放
  • true(default):为了最小化暂停而延迟播放
平台:IOS

bufferConfig

Adjust the buffer settings. This prop takes an object with one or more of the properties listed below.
调整缓冲区设置,这个属性支持下列一个或多个属性值。

属性 类型 描述
minBufferMs number The default minimum duration of media that the player will attempt to ensure is buffered at all times, in milliseconds.播放机将尝试确保始终缓冲的媒体的默认最短持续时间(毫秒)。
maxBufferMs number The default maximum duration of media that the player will attempt to buffer, in milliseconds.媒体将在毫秒内缓冲的默认最大持续时间。
bufferForPlaybackMs number The default duration of media that must be buffered for playback to start or resume following a user action such as a seek, in milliseconds.在用户操作(如搜索)后,播放开始或恢复时必须缓冲的媒体的默认持续时间(毫秒)。
playbackAfterRebufferMs number The default duration of media that must be buffered for playback to resume after a rebuffer, in milliseconds. A rebuffer is defined to be caused by buffer depletion rather than a user action.必须缓冲的媒体的默认持续时间,以毫秒为单位,以便在断开后恢复播放拒绝被定义为由缓冲区耗尽而不是用户操作引起。只有设置source时才应设置此属性,加载媒体后更改此属性将导致重新加载。

默认值设置例子:

bufferConfig={{
  minBufferMs: 15000,
  maxBufferMs: 50000,
  bufferForPlaybackMs: 2500,
  bufferForPlaybackAfterRebufferMs: 5000
}}
平台:Android ExoPlayer

controls

Determines whether to show player controls.
确定是否显示播放器控件。

  • false(default):不显示播放器控件
  • true:显示播放器控件
    Note on iOS, controls are always shown when in fullscreen mode.
    注意:在IOS上,控件总是在全屏下显示。
    For Android MediaPlayer, you will need to build your own controls or use a package like react-native-video-controls or react-native-video-player.
    对于安卓播放器,你需要自己创建插件或是使用第三方插件,例如:react-native-video-controls或者react-native-video-player。
平台:Android ExoPlayer, iOS, react-native-dom

disableFocus

Determines whether video audio should override background music/audio in Android devices.
确定视频音频是否应覆盖Android设备中的背景音乐/音频。

  • false(default):覆盖背景音频/音乐
  • true:允许播放其他App的音频/音乐
平台:Android Exoplayer

filter

添加视频filter
FilterType.NONE (default) - No Filter
FilterType.INVERT - CIColorInvert
FilterType.MONOCHROME - CIColorMonochrome
FilterType.POSTERIZE - CIColorPosterize
FilterType.FALSE - CIFalseColor
FilterType.MAXIMUMCOMPONENT - CIMaximumComponent
FilterType.MINIMUMCOMPONENT - CIMinimumComponent
FilterType.CHROME - CIPhotoEffectChrome
FilterType.FADE - CIPhotoEffectFade
FilterType.INSTANT - CIPhotoEffectInstant
FilterType.MONO - CIPhotoEffectMono
FilterType.NOIR - CIPhotoEffectNoir
FilterType.PROCESS - CIPhotoEffectProcess
FilterType.TONAL - CIPhotoEffectTonal
FilterType.TRANSFER - CIPhotoEffectTransfer
FilterType.SEPIA - CISepiaTone
更多关于filter的细节可以参考iOS docs
注意: 使用筛选器可能会影响CPU使用率,解决方法是使用过滤器保存视频,然后加载保存的视频。
HLS播放列表当前不支持视频筛选器。
filterEnabled必须设置为 true

平台: IOS

filterEnabled

是否允许播放器过滤

  • false(default):不允许
  • true:允许
平台:IOS

fullscreen

Controls whether the player enters fullscreen on play.
控制播放机是否在播放时进入全屏。

  • false(default):不全屏显示视频
  • true:全屏显示视频
平台:IOS

fullscreenAutorotate

If a preferred fullscreenOrientation is set, causes the video to rotate to that orientation but permits rotation of the screen to orientation held by user. Defaults to TRUE.
如果设置了首选的全屏方向,则会导致视频旋转到该方向,但允许屏幕旋转到用户持有的方向默认为TRUE。

平台:IOS

fullscreenOrientation

  • all(default)
  • landscape - 横向全屏
  • portrait - 竖向全屏
平台:IOS

headers

Pass headers to the HTTP client. Can be used for authorization. Headers must be a part of the source object.
将头部信息传递给HTTP客户端,可用于头部授权。头部信息必须是源对象的一部分。
要在iOS上启用此功能,您需要手动编辑RCTVideo.m并在playerItemForSource函数中取消注释头代码。这是因为代码使用了私有API,可能会导致应用商店拒绝您的应用。使用风险自负。
例:

source={{
  uri: "https://www.example.com/video.mp4",
  headers: {
    Authorization: 'bearer some-token-value',
    'X-Custom-Header': 'some value'
  }
}}
平台:Android ExoPlayer

hideShutterView

Controls whether the ExoPlayer shutter view (black screen while loading) is enabled.
控制是否启用ExoPlayer快门视图(加载时为黑屏)。

  • false(default):使用快门视图
  • true:隐藏快门视图
平台:Android ExoPlayer

id

Set the DOM id element so you can use document.getElementById on web platforms. Accepts string values.
设置DOM id,这样可以在web平台通过document.getELementById访问到该元素。值为string类型。
例:

id="video"
平台:react-native-dom

ignoreSilentSwitch

Controls the iOS silent switch behavior
控制IOS静默开关行为

  • "inherit" (default) - Use the default AVPlayer behavior
  • "ignore" - Play audio even if the silent switch is set
  • "obey" - Don't play audio if the silent switch is set
平台:IOS

maxBitRate

Sets the desired limit, in bits per second, of network bandwidth consumption when multiple video streams are available for a playlist.
当一个播放列表中有多个视频流可用时,设置所需的网络带宽消耗限制(以位/秒为单位)。
默认:0。不要限制maxBitRate
例: maxBitRate={2000000} // 2兆

平台:Android ExoPlayer, iOS

minLoadRetryCount Sets the minimum number of times to retry loading data before failing and reporting an error to the application. Useful to recover from transient internet failures. 设置在失败并向应用程序报告错误之前重试加载数据的最少次数。有助于从短暂的互联网故障中恢复。 默认:3次 例:

minLoadRetryCount={5} // retry 5 times
平台:Android ExoPlayer

muted

Controls whether the audio is muted
控制音频是否静音

  • false(default):不静音
  • true:静音
平台:ALL

paused

Controls whether the media is paused
控制媒体是否暂停

  • false(default):不暂停
  • true:暂停
平台:ALL

pictureInPicture

Determine whether the media should continue playing while the app is in the background. This allows customers to continue listening to the audio.
确定应用程序在后台时媒体是否应继续播放,这允许客户继续收听音频

  • false(default):不继续播放媒体
  • true:继续播放媒体 在IOS上使用这个特性,你需要:
    Enable Background Audio in your Xcode project
    设置ignoreSilentSwitch属性为“ignore”
平台:Android ExoPlayer, Android MediaPlayer, iOS

playInBackground

Determine whether the media should continue playing while the app is in the background. This allows customers to continue listening to the audio.
确定应用程序在后台时媒体是否应继续播放。这允许客户继续收听音频。

  • false(default):不允许
  • true:允许 要在iOS上使用此功能,你必须:
    在xcode项目中启动后台音频
    设置ignoreSilentSwitch属性为'ignore'
平台:Android ExoPlayer, Android MediaPlayer, iOS

playWhenInactive

Determine whether the media should continue playing when notifications or the Control Center are in front of the video.
确定当通知或控制中心位于视频前面时,媒体是否应继续播放。

  • false(default):停止播放
  • true:继续播放
平台:IOS

poster

An image to display while the video is loading
视频loading时显示的图片
值: 一个URL形式的字符串, 例如. "baconmockup.com/300/200/"

平台: ALL

posterResizeMode

Determines how to resize the poster image when the frame doesn't match the raw video dimensions.
确定当框架与原始视频尺寸不匹配时如何调整海报图像的大小。

  • "contain":均匀缩放图像(保持图像的纵横比),以便图像的两个维度(宽度和高度)都等于或小于视图的相应维度(减去填充)。
  • "center":将图像在视图中沿两个维度居中。如果图像大于视图,请均匀地将其缩小,使其包含在视图中。
  • "cover":均匀缩放图像(保持图像的纵横比),以便图像的两个维度(宽度和高度)都等于或大于视图的相应维度(减去填充)。
  • "none":不应用调整大小
  • "repeat":重复图像以覆盖视图的框架。图像将保持其大小和纵横比。(仅限iOS)
  • "stretch":独立缩放宽度和高度,这可能会改变src的纵横比。
平台:ALL

progressUpdateInterval

Delay in milliseconds between onProgress events in milliseconds.
onProgress事件之间的延迟(毫秒)。
默认:250.0

平台:ALL

rate

Speed at which the media should play.
播放速率

  • 0.0:停止播放
  • 1.0:正常倍速 其他值:放慢或加快播放速度
平台:ALL

注意:对于安卓播放器,只支持安卓6.0及更高版本

repeat

Determine whether to repeat the video when the end is reached
确定到达结束时是否重复视频

  • false(default):不重复
  • true:重复
平台:ALL

reportBandwidth

Determine whether to generate onBandwidthUpdate events. This is needed due to the high frequency of these events on ExoPlayer.
确定是否生成onBandwidthUpdate事件。这是必要的,因为这些事件在ExoPlayer上的频率很高。

  • false(default):生成onBandwidthUpdate事件
  • true:不生成onBandwidthUpdate事件
平台:Android ExoPlayer

resizeMode

Determines how to resize the video when the frame doesn't match the raw video dimensions.
确定当帧与原始视频尺寸不匹配时如何调整视频的大小。

  • "none":不应用调整大小
  • "cover":均匀缩放图像(保持图像的纵横比),以便图像的两个维度(宽度和高度)都等于或大于视图的相应维度(减去填充)。
  • "contain":均匀缩放图像(保持图像的纵横比),以便图像的两个维度(宽度和高度)都等于或小于视图的相应维度(减去填充)。
  • "stretch":独立缩放宽度和高度,这可能会改变src的纵横比。
平台:Android ExoPlayer, Android MediaPlayer, iOS, Windows UWP

selectedAudioTrack

Configure which audio track, if any, is played.
配置要播放的音频曲目(如果有)。
例:

selectedAudioTrack={{
  type: "title",
  value: "Dubbing"
}}

Type Value Description

  • "system" (default) N/A Play the audio track that matches the system language. If none match, play the first track.
  • "disabled" N/A Turn off audio
  • "title" string Play the audio track with the title specified as the Value, e.g. "French"
  • "language" string Play the audio track with the language specified as the Value, e.g. "fr"
  • "index" number Play the audio track with the index specified as the value, e.g. 0 If a track matching the specified Type (and Value if appropriate) is unavailable, the first audio track will be played. If multiple tracks match the criteria, the first match will be used.
    如果与指定类型匹配的音轨(以及相应的值)不可用,则将播放第一个音频音轨。如果多个曲目符合条件,将使用第一个匹配。
平台:Android ExoPlayer, iOS

selectedTextTrack

Configure which text track (caption or subtitle), if any, is shown.
配置显示哪个文本(标题或副标题)(如果有)。
例:

selectedTextTrack={{
  type: "title",
  value: "English Subtitles"
}}

Type Value Description

  • "system" (default) N/A Display captions only if the system preference for captions is enabled
  • "disabled" N/A Don't display a text track
  • "title" string Display the text track with the title specified as the Value, e.g. "French 1"
  • "language" string Display the text track with the language specified as the Value, e.g. "fr"
  • "index" number Display the text track with the index specified as the value, e.g. 0 Both iOS & Android (only 4.4 and higher) offer Settings to enable Captions for hearing impaired people. If "system" is selected and the Captions Setting is enabled, iOS/Android will look for a caption that matches that customer's language and display it.
    iOS和Android(只有4.4及更高版本)都提供了为听障人士启用字幕的设置。如果选择了“系统”,并且启用了字幕设置,iOS/Android将查找与该客户语言匹配的字幕并将其显示。
    If a track matching the specified Type (and Value if appropriate) is unavailable, no text track will be displayed. If multiple tracks match the criteria, the first match will be used.
    如果与指定类型(和值(如果适用))匹配的轨迹不可用,则不会显示任何文本轨迹。如果多个曲目符合条件,将使用第一个匹配。
平台:Android ExoPlayer, iOS

selectedVideoTrack

Configure which video track should be played. By default, the player uses Adaptive Bitrate Streaming to automatically select the stream it thinks will perform best based on available bandwidth.
配置应播放的视频曲目。默认情况下,播放机使用自适应比特率流来根据可用带宽自动选择其认为性能最佳的流。

例:

selectedVideoTrack={{
  type: "resolution",
  value: 480
}}

Type Value Description

  • "auto" (default) N/A Let the player determine which track to play using ABR
  • "disabled" N/A Turn off video
  • "resolution" number Play the video track with the height specified, e.g. 480 for the 480p stream
  • "index" number Play the video track with the index specified as the value, e.g. 0 If a track matching the specified Type (and Value if appropriate) is unavailable, ABR will be used.
    如果与指定类型(和值(如果合适)匹配的轨道不可用,则将使用ABR。
平台:Android ExoPlayer

source

Sets the media source. You can pass an asset loaded via require or an object with a uri.
设置媒体源。您可以传递通过require加载的资产或带有uri的对象。
The docs for this prop are incomplete and will be updated as each option is investigated and tested.
这个属性的文档不完整,将在调查和测试每个选项时更新。

Asset loaded via require
通过require来进行加载
例:

const sintel = require('./sintel.mp4');

source={sintel}

URI string

A number of URI schemes are supported by passing an object with a uri attribute.
通过传递具有URI属性的对象,支持许多URI方案。
Web address (http://, https://)
例:

source={{uri: 'https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_10mb.mp4' }}
平台:ALL

File path (file://)

例:

source={{ uri: 'file:///sdcard/Movies/sintel.mp4' }}

注意:
Your app will need to request permission to read external storage if you're accessing a file outside your app.
如果您正在访问应用程序外部的文件,则应用程序需要请求读取外部存储的权限。

平台:Android ExoPlayer, Android MediaPlayer, possibly others

iPod Library (ipod-library://)

Path to a sound file in your iTunes library. Typically shared from iTunes to your app.
iTunes库中声音文件的路径。通常从iTunes共享到应用程序。
例:

source={{ uri: 'ipod-library:///path/to/music.mp3' }}

注意:
Using this feature adding an entry for NSAppleMusicUsageDescription to your Info.plist file as described here
使用此功能将NSAppleMusicUsageDescription的条目添加到Info.plist文件中,如下所述

平台:IOS

Other protocols

The following other types are supported on some platforms, but aren't fully documented yet: content://, ms-appx://, ms-appdata://, assets-library://
某些平台支持以下其他类型,但尚未完全记录:content://、ms-appx://、ms-appdata://、assets-library://

stereoPan

Adjust the balance of the left and right audio channels. Any value between –1.0 and 1.0 is accepted.
调整左右声道的平衡。任何介于-1.0和1.0之间的值都可以接受。

  • -1.0 左声道
  • 0.0 (default) 双声道
  • 1.0 右声道
平台:Android MediaPlayer

textTracks

Load one or more "sidecar" text tracks. This takes an array of objects representing each track. Each object should have the format:
加载一个或多个“sidecar”文本轨迹。这需要一个表示每个轨迹的对象数组。每个对象都应具有以下格式:
Property Description

  • title Descriptive name for the track
  • language 2 letter ISO 639-1 code representing the language
  • type Mime type of the track* TextTrackType.SRT - SubRip (.srt)* TextTrackType.TTML - TTML (.ttml)* - - TextTrackType.VTT - WebVTT (.vtt)iOS only supports VTT, Android ExoPlayer supports all 3
  • uri URL for the text track. Currently, only tracks hosted on a webserver are supported On iOS, sidecar text tracks are only supported for individual files, not HLS playlists. For HLS, you should include the text tracks as part of the playlist.
    在iOS上,sidecar文本轨迹只支持单个文件,而不支持HLS播放列表。对于HLS,您应该将文本曲目作为播放列表的一部分。
    注意: Due to iOS limitations, sidecar text tracks are not compatible with Airplay. If textTracks are specified, AirPlay support will be automatically disabled. 由于iOS的限制,sidecar文本曲目与Airplay不兼容。如果指定了文本轨迹,则将自动禁用AirPlay支持。
    例如:
import { TextTrackType }, Video from 'react-native-video';

textTracks={[
  {
    title: "English CC",
    language: "en",
    type: TextTrackType.VTT, // "text/vtt"
    uri: "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt"
  },
  {
    title: "Spanish Subtitles",
    language: "es",
    type: TextTrackType.SRT, // "application/x-subrip"
    uri: "https://durian.blender.org/wp-content/content/subtitles/sintel_es.srt"
  }
]}
平台:Android ExoPlayer, iOS

useTextureView

Controls whether to output to a TextureView or SurfaceView.
控制是输出到TextureView还是SurfaceView。

SurfaceView is more efficient and provides better performance but has two limitations:
SurfaceView效率更高,性能更好,但有两个限制:
It can't be animated, transformed or scaled
无法设置动画、变换或缩放
You can't overlay multiple SurfaceViews
无法设置动画、转换或缩放不能覆盖多个SurfaceView

useTextureView can only be set at same time you're setting the source.
只能在设置源的同时设置useTextureView。

  • true (default) 使用TextureView
  • false 不使用TextureView
平台:Android ExoPlayer

volume

Adjust the volume.
调节音量

  • 1.0 (default) Play at full volume 全音播放
  • 0.0 静音
  • 其他值 较少音量
平台:ALL