Expo Big Battle (26)--expo SDK API video and WebBrowser

Brief: This series of articles will be a comprehensive introduction to the Expo, I contact the Expo since June 2017, the study of the Expo intermittent, all the way to nearly 10 months, nonsense not to say, next you see the content, speak all to the official website

I guess go all machine turn + personal modification supplement +demo test form, to the expo to do a big blood! Welcome to join the Expo Interest Learning Exchange Group: 597732981

"Before I wrote some columns about Expo and RN entry configuration for East I west, you can click here to view: from zero learning RN development"

Related articles:

Expo Big Battle (a)--what is the expo, how to install Expo Clinet and xde,xde how to use

Expo Big Battle (ii)--expo life cycle, Expo Community exchanges, Expo learning necessary resources, the development of the use of the expo concerns some issues

Expo Big Battle (iii)--to the development of react native project developers have targeted the introduction of the limitations of Expo,expo, the development of project selection points of attention, etc.

Expo Big Battle (Iv.)--Rapid use of Expo to build a key term in a App,expo

Expo Big Battle (v) configuration information for App.json files in--expo

Expo Big Battle (vi)--EXPO Development mode, Expo in the EXP Command line tool, Expo How to view the debug mode in the log Log,expo

Expo Big Battle (vii)--expo How to use Genymotion simulator

Expo Big Battle (eight)--expo in the Publish and Expo link, to link this piece of things not detailed see, we can come to communicate with me

More >>

Written in chapter 23 after the words, before the translation, no matter how, good and bad, after all, is the end of the expo, but also the basic theory of the things in-depth understanding again, the following Expo big Battle series will mainly introduce the Expo SDK API.

Web browser (WebBrowser)

Provides access to the system Web browser and supports handling redirection. On iOS, it uses Sfsafariviewcontroller or sfauthenticationsession, depending on the method you call, and uses Chromecustomtabs on Android. Starting with iOS 11, Sfsafariviewcontroller no longer shares cookies with Safari, so if you use WebBrowser for authentication, You will want to use Webbrowser.openauthsessionasync, and if you only want to open a webpage (such as your app privacy policy), use Webbrowser.openbrowserasync.

Working with deep links from WebBrowser

If you are using the WebBrowser window for authentication, or if you want to pass the information back to other use cases of your app through deep links, be sure to add a handler with Linking.addeventlistener before you open the browser. When the listener fires, you should call Webbrowser.dismissbrowser ()-it does not close automatically when the deep link is processed. In addition, WebBrowser redirects work in the same way as other deep links. Learn more about it in the link guide.

Expo.webbrowser

Expo.WebBrowser.openBrowserAsync (URL)

Use Sfsafariviewcontroller and Chrome on iOS to open URLs in iOS mode in the new Custom tab on Android. On iOS, modal (modal) safari does not share cookies with system safari. If you need this, use Webbrowser.openauthsessionasync.

Parameters

• URL (string)-the URL that opens in a Web browser.

Return

Return a Commitment (Promise):

• If the user closes the Web browser, Promise uses {type: ' Cancel ' to parse.
• If the browser uses Expo.WebBrowser.dismissBrowser () to close, the promise is resolved with {type: ' dismissed '}.

Expo.WebBrowser.openAuthSessionAsync (Url,redirecturl)

Use Sfauthenticationsession on iOS and Chrome browser on Android

New Custom tab to open the URL in iOS mode. On iOS, the user is asked to allow the app to authenticate using the given URL.

Parameters

• URL (string)-the URL that opens in a Web browser. This should be a login page.
• RedirectURL (String)-optional: Deep link URL back to your app. By default, this will be the EXPO.CONSTANTS.LINKINGURL

Return a Commitment (promise):

1. If the user does not allow the application to authenticate using the given URL, Promise uses {type: ' Cancel ' to resolve.
2. If the user closes the Web browser, Promise uses {type: ' Cancel ' to parse.
3. If the browser uses Expo.WebBrowser.dismissBrowser () to close, the promise is resolved with {type: ' dismissed '}.

Expo.WebBrowser.dismissBrowser ()

Cancels the system-provided web browser.

Return

This commitment is resolved with {type: ' dismissed '}.

Videos (VIDEO)

A component that displays video inline with other react Native UI elements in your app. The video display size and position on the screen can be set using the usual react native style.

Most video and audio have common APIs that are documented in AV documents. This page covers video-specific props and APIs. We encourage you to browse this document for basic video work, and then go to the AV documentation for more advanced features. The audio experience of the video, such as whether to break music that has been played in another app, or whether to play a sound when the phone is in silent mode, can be customized using the audio API.

Cases

Here is a simple example of an auto-play and looping video.

 <"  http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4   }} rate  ={1.0  } volume  ={1.0   ismuted  ={false  } resizemode  = cover   "  Shouldplay islooping style  ={{width: , Height: 300  /> 

For more advanced examples, see the sample playlist and wrapper (wraps) <video> custom video Player Control components, add custom controls, and use the <video> API extensively. This application uses the Videoplayer control.

Expo.video Property (props)

Source and Postersource Properties customize the origin of the video content.

• Resource (source)

The source of the video data to display. If this property is empty or left blank, then the video component will not display any content.

Please note that this can also be set on ref via LoadAsync (). See below or AV documentation for more information.

The following forms are supported for source code: (The following forms for the source is supported:)

• The form is a dictionary of {uri: '/http. Path/to/file '}, where the URL points to a video file on the network.
• Require (' Path/to/file ') to the video file resource in the source code directory.
• The Expo.asset object used for the video file asset.

The iOS developer documentation lists the video formats supported by iOS.

The Android Developer documentation lists the video formats supported by Android.

• Postersource

The source of an optional image that is displayed on the video at load time. The following forms are supported:

• • The form is a dictionary of {uri: '/http. Path/to/file '}, which contains the URL to the network slice file.
  • Require (' Path/to/file ') to the image file resource in the source code directory.

The Usenativecontrols,resizemode and Useposter properties customize the UI of the component.

Usenativecontrols

If set to true, native playback controls (such as play and pause) are displayed in the video component. If you prefer to use custom controls, you can write them yourself to view the Videoplayer components.

ResizeMode

A string that describes how the video should be scaled to appear in the component view boundary. Must be one of the following values:

Expo.Video.RESIZE_MODE_STRETCH-Stretches to fill the component boundaries.

Expo.Video.RESIZE_MODE_CONTAIN-adapts the component boundary while preserving the aspect ratio.

Expo.Video.RESIZE_MODE_COVER-fills the component boundaries while preserving the aspect ratio.

Useposter

A Boolean value that, if set to true, displays the image when the video is loaded (its source is set by prop Postersource).

Onplaybackstatusupdate,onreadyfordisplay and oniosfullscreenupdate props pass information about the state of the video component. Onloadstart,onload and onerror props also provide backward-compatible images (but they are redundant with onplaybackstatusupdate).

Onplaybackstatusupdate

A function that is called periodically through the playbackstatus of a video. You might be using this a lot. For more information about onplaybackstatusupdate and the call interval, see the AV documentation.

Onreadyfordisplay

The function called when the video is ready to be displayed. Note that this function is called whenever the video's natural size changes.

The function passes a dictionary that contains the following key-value pairs:

Naturalsize: A dictionary that contains the following key-value pairs:

• Width: A number that describes the breadth (in pixels) of the video data
• Height: A number that describes the pixel height of the video data
• Orientation: A string describing the natural direction of the video data, either "Portrait (Portrait)" or "Landscape (landscape)"

Status: Playbackstatus of the video; see the AV documentation for more information.

Onfullscreenupdate

Functions that are called when the state of the native iOS full-screen view changes (via the Presentfullscreenplayer () and Dismissfullscreenplayer () methods on video ref).

The function passes a dictionary that contains the following key-value pairs:

Fullscreenupdate: A number with one of the following values:

• Expo.Video.FULLSCREEN_UPDATE_PLAYER_WILL_PRESENT: Describe the full-screen player is about to be rendered
• Expo.Video.FULLSCREEN_UPDATE_PLAYER_DID_PRESENT: Description Full screen player just finished rendering
• Expo.Video.FULLSCREEN_UPDATE_PLAYER_WILL_DISMISS: Description Full-screen player is about to DISMISS
• Expo.Video.FULLSCREEN_UPDATE_PLAYER_DID_DISMISS: Description Full screen player just finished DISMISS

Status: Playbackstatus of the video; see the AV documentation for more information.

Onloadstart

The function that is called when the video starts to load into memory. No parameter calls are required.

OnLoad

Once the video is loaded, the function is called. Data streaming, all data may not have been extracted, just enough to render the first frame. The function is called with the playbackstatus of the video as a parameter; see the AV documentation for more information.

OnError

If the load or playback encounters a fatal error, the function is called. The function passes an error message string as a parameter. A send error is also set in the Playbackstatus.error passed to the onplaybackstatusupdate callback function.

Finally, the following props can be used to control the playback of the video, but we recommend that you use the methods provided on the references (below and in the AV documentation) for better control.

Status

The dictionary sets a new playbackstatustoset on the video. For more information about Playbackstatustoset, see the AV documentation.

Progressupdateintervalmillis

A number that describes the minimum time interval for new milliseconds between onplaybackstatusupdate calls. For more information, see your AV documentation.

Positionmillis

The ideal location for playback, in milliseconds. For more information, see your AV documentation.

Shouldplay

A Boolean value that describes whether the media should play. Playback may not start immediately after setting this value for reasons such as Buffering. Be sure to update your UI based on the IsPlaying and Isbuffering properties of Playbackstatus. For more information, see your AV documentation.

Rate

The playback rate required by the media. the value must be between 0.0 and 32.0 . Only available for Android API version 23 and later and iOS. For more information, see your AV documentation.

Shouldcorrectpitch

A Boolean value that describes whether we should modify the pitch of the rate of change. If set to true, the pitch of the audio will be corrected (so a rate different from 1.0 will prolong the audio time). For more information, see your AV documentation.

Volume

The volume required for the audio of this media. This value must be between 0.0 (mute) and 1.0 (maximum volume) . For more information, see your AV documentation.

ismuted

A Boolean value that describes whether the media's audio should be muted. For more information, see your AV documentation.

Islooping

A Boolean value that describes whether the media should play one time (false) or an infinite loop (true). For more information, see your AV documentation.

The following methods are available in the component's ref:

Videoref.presentfullscreenplayer ()

This renders a full-screen view of the video component on the app's user interface. Note that the local control will also be visible in full-screen mode, even if Usenativecontrols is set to false.

Return

Once the full-screen player finishes playing, the playbackstatus of the video satisfies the promise, or rejects it if an error occurs, or the player is raised on an Android device.

Videoref.dismissfullscreenplayer ()

This eliminates the full-screen video view.

Return

Once the full-screen player finishes dissolving, or if an error occurs, or if the video is called on an Android device, the playbackstatus of the video will satisfy the promise.

The rest of the APIs on the video component ref are the same as the Expo.Audio.Sound API-see the AV documentation for more information:

• videoRef.loadAsync(source, initialStatus = {}, downloadFirst = true)

• videoRef.unloadAsync()

• videoRef.getStatusAsync()

• videoRef.setOnPlaybackStatusUpdate(onPlaybackStatusUpdate)

• videoRef.setStatusAsync(statusToSet)

• videoRef.playAsync()

• videoRef.replayAsync()

• videoRef.pauseAsync()

• videoRef.stopAsync()

• videoRef.setPositionAsync(millis)

• videoRef.setRateAsync(value, shouldCorrectPitch)

• videoRef.setVolumeAsync(value)

• videoRef.setIsMutedAsync(value)

• videoRef.setIsLoopingAsync(value)

• videoRef.setProgressUpdateIntervalAsync(millis)

The next one goes on, this article mainly introduces: Expo SDK API Video and WebBrowser, you are welcome to pay attention to my public number, this article is approved by everyone, my measure is the public number of fans increase number. Welcome to reprint, but must keep my blog link!

Expo Big Battle (26)--expo SDK API video and WebBrowser