diff --git a/README.md b/README.md index 9aac6495..caf69cf3 100644 --- a/README.md +++ b/README.md @@ -191,8 +191,6 @@ using System.Collections.Generic; onFullscreenPlayerDidPresent={this.fullScreenPlayerDidPresent} // Callback after fullscreen started onFullscreenPlayerWillDismiss={this.fullScreenPlayerWillDismiss} // Callback before fullscreen stops onFullscreenPlayerDidDismiss={this.fullScreenPlayerDidDismiss} // Callback after fullscreen stopped - onLoadStart={this.loadStart} // Callback when video starts to load - onLoad={this.setDuration} // Callback when video loads onProgress={this.setTime} // Callback every ~250ms with currentTime onTimedMetadata={this.onTimedMetadata} // Callback when the stream receive some metadata style={styles.backgroundVideo} /> @@ -233,9 +231,14 @@ var styles = StyleSheet.create({ * [resizeMode](#resizemode) * [selectedTextTrack](#selectedtexttrack) * [stereoPan](#stereopan) +* [textTracks](#texttracks) * [useTextureView](#usetextureview) * [volume](#volume) +### Event props +* [onLoad](#onload) +* [onLoadStart](#onloadstart) + #### allowsExternalPlayback Indicates whether the player allows switching to external playback mode such as AirPlay or HDMI. * **true (default)** - allow switching to external playback mode @@ -359,7 +362,7 @@ Type | Value | Description "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 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. +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. 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. @@ -373,6 +376,40 @@ Adjust the balance of the left and right audio channels. Any value between –1 Platforms: 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: + +Property | Description +--- | --- +title | Descriptive name for the track +language | 2 character [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) representing the language +type | Mime type of the track
* TextTrackType.SRT - .srt SubRip Subtitle
* TextTrackType.TTML - .ttml TTML
* TextTrackType.VTT - .vtt WebVTT +uri | URL for the text track. Currently, only tracks hosted on a webserver are supported + +Example: +``` +import { TextTrackType }, Video from 'react-native-video'; + +textTracks={[ + { + title: "English CC", + language: "en", + type: "text/vtt", TextTrackType.VTT, + uri: "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt" + }, + { + title: "Spanish Subtitles", + language: "es", + type: "application/x-subrip", TextTrackType.SRT, + uri: "https://durian.blender.org/wp-content/content/subtitles/sintel_es.srt" + } +]} +``` + +This isn't support on iOS because AVPlayer doesn't support it. Text tracks must be loaded as part of an HLS playlist. + +Platforms: Android ExoPlayer + #### useTextureView Output to a TextureView instead of the default SurfaceView. In general, you will want to use SurfaceView because it is more efficient and provides better performance. However, SurfaceViews has two limitations: * It can't be animated, transformed or scaled @@ -393,6 +430,68 @@ Adjust the volume. Platforms: all +### Event props + +#### onLoad +Callback function that is called when the media is loaded and ready to play. + +Payload: + +Property | Description +--- | --- +currentPosition | Time in seconds where the media will start +duration | Length of the media in seconds +naturalSize | * width - Width in pixels that the video was encoding at
* height - Height in pixels that the video was encoding at
* orientation - "portrait" or "landscape" +textTracks | An array with info about the text tracks
* index - Index number
* title - Description of the track
* language - IOS 639-1 2 letter language code
* type - Mime type of track + +Example: +``` +{ + canPlaySlowForward: true, + canPlayReverse: false, + canPlaySlowReverse: false, + canPlayFastForward: false, + canStepForward: false, + canStepBackward: false, + currentTime: 0, + duration: 5910.208984375, + naturalSize: { + height: 1080 + orientation: 'landscape' + width: '1920' + }, + textTracks: [ + { title: '#1 French', language: 'fr', index: 0, type: 'text/vtt' }, + { title: '#2 English CC', language: 'en', index: 1, type: 'text/vtt' }, + { title: '#3 English Director Commentary', language: 'en', index: 2, type: 'text/vtt' } + ] +} +``` + +Platforms: all + +#### onLoadStart +Callback function that is called when the media starts loading. + +Payload: + +Property | Description +--- | --- +isNetwork | Boolean indicating if the media is being loaded from the network +type | Type of the media. Not available on Windows +uri | URI for the media source. Not available on Windows + +Example: +``` +{ + isNetwork: true, + type: '', + uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8' +} +``` + +Platforms: all + ### Additional props To see the full list of available props, you can check the [propTypes](https://github.com/react-native-community/react-native-video/blob/master/Video.js#L246) of the Video.js component.