If you have an existing site or web resource that you would like to present to users inside your Dropsource app, you can do so using Web Views for HTML, and Actions to play audio / video within your app UI. Web Views can serve the same HTML content that your users see via a web browser, as well as streaming media such as audio or video, and you can add interaction to your content using Dropsource Web View Actions.
Using Web Views
You will see the Web View in the Elements drawer on the left of the editor. Drag it onto the Canvas to include it in a page. Resize and position the Web View as required – the optimum dimensions might depend on the content you plan on loading.
Set the URL to display in the Web View either in the Properties tab, or dynamically using the Go To a Page in a Web View Action (iOS) or Set Value Action (Android – selecting the Web View Element and URL property). The URL can come from any input source in your app.
If you want to support the user viewing your web content, but don’t require this to take place inside your app, you can launch a URL on the device web browser instead – using the Open Web Page Action.
Navigating inside a Web View
To provide navigation functionality on the Web View, use the Actions to Go Forward in a Web View and Go Back in a Web View, for example when the user taps buttons. Actions are also provided for refreshing and stopping the Web View.
Detecting Web View Status
Your app can respond to a variety of load status Events on Web Views.
Web Views simulate in the browser, so run your app to see your web content loading.
You can load URLs for media files hosted online into your Web Views. Use the Properties settings to setup playback options.
Web Views loading streaming media, for example YouTube videos, can be played inside the app screen or launched full screen.
You can see video stream in the browser using the simulator, but currently it does not support audio playback, so you will need to test that on a physical device.
Tailoring your Web Content for Web Views
You will find that certain HTML elements and other web page functions don’t perform the way you might expect when delivered via a Web View. For this reason it’s advizable to test your app thoroughly to ensure your users will be able to access your web content effectively.
To play a remote video in your app, add the Play a Video Action, passing the video URL and specifying autoplay status.
You can download an audio file for playback in your app by using the following process:
- Create a Page Variable of type AVAudioPlayer (iOS) / MediaPlayer (Android).
- Add a Download Remote File Action, passing the audio file URL.
- Add the Create an Audio Session Action to the nested Download Succeeded Event, specifying the new local URL for the downloaded file from the Event Data container.
- Add a Set Value Action also in the Download Succeeded Event, setting the Page Variable you created to the MediaPlayer / AVAudioPlayer object returned from the Create an Audio Session Action Data.
- Add Actions to subsequent Events in your page to control playback using the Page Variable.
See Audio Playback with User Controls for a more detailed walkthrough of including audio in your app.