Using the New Native Web and Video API’s
As mentioned previously, there are two brand new APIs available for creating native webView objects, as well as native video objects. And for this week’s “Tutorial Tuesday”, I’m going to show you exactly how to use them.
For quite some time now, Corona SDK has been capable of displaying web pages (see Web Popups), as well as video playback, so on the surface, it may seem like these “new” APIs are redundant. Fortunately, that is not the case because these new APIs provide solutions to some of the (often deal-breaking) limitations of web popups and video playback features of old.
Web Views vs. Web Popups
These two are very similar, but there are some differences in usage as well as functionality. The most notable differences include:
- The ability to have more than one WebView at a time.
- You can move and rotate WebViews as you would other display objects (although they are still native objects that cannot be inserted into groups).
- You may attach physics bodies to them! (This could result in some pretty neat effects)
- WebViews must be removed explicitly (e.g. they cannot be closed by returning false in the callback listener, as with Web Popups).
Video Objects
Native video objects are much more flexible than its predecessor (media.playVideo). The primary differences include:
- The ability to specify a size for your video object (e.g. they do not have to take up the entire screen anymore).
- There can be multiple video objects on the screen at once.
- You may programmatically seek to specified location (in seconds) of the video file.
- Video can be programmatically played/paused.
- You can move and rotate video objects as you would other display objects (although they are still native objects that cannot be inserted into groups).
- And of course, you can also attach physics bodies to them!
native.newWebView() Usage
If you’ve ever used Web Popups before, using native WebViews should be fairly familiar. If not, that’s okay too, because it’s very simple.
Here’s what the syntax looks like:
You can see the API documentation for details on all the function arguments, but they are fairly straight-forward. Below is an example of how to create a WebView that is 320 pixels wide, and 250 pixels tall:
webView:request( "http://www.anscamobile.com" )
The request() method an also take an optional baseDir second argument which can be used if the you specify a local file (such as an HTML file) as the URL string (first argument).
Easy so far right? Now, let’s create one with a listener that shows an alert whenever there’s an error loading a page:
local url = event.url -- reference to url being requested
if event.errorCode then -- is nil when there is no error
native.showAlert( "Error!", event.errorMessage, { "OK" } )
end
end
local webView = native.newWebView( 0, 0, 320, 250, webListener )
webView:request( "http://fakewebsitethatshouldthrowerror.com" )
As you can see, the event table in the WebView’s listener function includes event.url, event.errorCode, and event.errorMessage. As a reminder, returning false in the callback listener has no effect on the webView.
Next, let’s create a webView, move it around, and then rotate it (just for fun), and then remove it:
webView:request( "http://www.anscamobile.com/" )
webView.x = 200
webView.y = 240
webView.rotation = 45
-- let's close the webView
webView:removeSelf()
webView = nil
Once again, please see the official native.newWebView() API documentation for more information on native WebViews, and also see the SampleCode for an example of multiple WebViews with physics! (Located at: /SampleCode/Interface/WebViewPhysics in Corona build 2012.731 or later).
Editor’s Note: There is a known bug that prevents local content from being loaded into WebViews, and will be fixed in a future daily build.
native.newVideo() Usage
So you thought WebViews were easy? Well you’ll be happy to know that native video objects are even easier to work with because there are no listeners to work with. You simply create the video object, optionally seek and/or move/rotate it (or add physics!), and then remove it when you’re finished.
Here’s what the syntax for native.newVideo() looks like:
Once again, the function arguments are pretty straight forward, but you can always view the API documentation for descriptions of each one.
Below is a complete example of creating a video object, loading a video file into it (which should be in your project folder), seeking to a specific playback position (in seconds), moving/rotating it, pausing, and then finally removal:
-- load a video and jump to 0:30
video:load( "myvideo.m4v", system.DocumentsDirectory )
video:seek( 30 )
-- play video and move/rotate
video:play()
video.x = 50
video.y = 150
video.rotation = 90
-- pause the video and remove
video:pause()
video:removeSelf()
video = nil
Very simple, yet very powerful API (as usual with Corona). 
To see an example of multiple video objects (with physics), see the sample code located at: /SampleCode/Interface/VideoViewPhysics in Corona build 2012.731 or later.
Please see the official native.newVideo() API documentation for more information on native video objects.
And that concludes this week’s “Tutorial Tuesday”. As a reminder, these two brand-new, powerful APIs are available to subscribers only for the time being through our Daily Builds program (available to ALL subscribers). Subscribe now to start adding WebViews and Video objects to your Corona apps today!
RSS feed
What about video listeners? onComplete etc… ?
It would be great if there is a way to view the videos using native.newVideo() in the simulator. Is there any? Will this be posible soon?
thanks
um…let me bug again with this again…would it work with this?
https://developer.anscamobile.com/forum/2011/12/23/help-webservice-json-files-and-widget
if so, how (please post there
Thanks,
RD
Any chance we might see the option to turn webview bounces off when required?
i.e.: [[webView.subviews objectAtIndex:0] setBounces:NO]; // ObjC
Perhaps something more in-line with the existing native.WebPopUp?
local options = { baseUrl=system.DocumentsDirectory, urlRequest=listener }
local webView = native.newWebView( 0, 0, 320, 250, options )
This would be really useful where you want the webview to act more like a scrollable view where upon reaching top/bottom/etc it would simply stop. It would also avoid having folks try to disable it using:
document.ontouchmove = function(event){
event.preventDefault();
}
…and other such less than ideal hacks.
heh, the ‘local options…’ above probably should have been something more like:
local options = { baseUrl=system.DocumentsDirectory, urlRequest=listener, bounces=false }
Now we can finally make more complex eBooks and even publish services like WoodWing does.
Next thing should be to use native.newVideo to load the Camera (or just make native.newCamera), where we could finally put out own images in front of it (for Augmented Reality).
Anyways, good job on that
will the newWebView will have –before the end of february– listener function options.urlRequest that will intercept all urlRequest events like the web popup ?
For a project I need both : moving the webView AND intercept request … This would be great…
@FREDERIC: You can specify a listener for WebViews and intercept the url via event.url (see the example in the post for information on using WebViews with a listener).
Good work – yet still no ‘back’ button functionality in webview?
so awesome!
I have a form in a webpopup/webview. Once I submit the form, can the submit button also simultaneously close the webpopup/webview?
Thanks!
@Perry: You can have the submit button take you to a specific URL such as “corona:close”, and then you can detect that url (via event.url) in the webview’s listener function and then close the webView once it detects that URL. There is an example of this in the Web Popup samplecode, but you’d have to port the syntax to be compatible with WebViews of course.
Thank you for helping to clarify this and for the quick reply!
Thanks jonathan for the blog post.
But will those articles ever have a home in the docs, like agreed by David (Cto)?
Thanks Jonathan.
Please can you explain how to implemnt a back button functionality?
Hi all,
Great news!
Just a simple question, any possible way to overlap a png during video playback. I’ve tried, but seems that video always stay at the top of display objects.
Thanks.
@Can
Until a possible “onComplete” listener feature is added for newVideo(), perhaps just run a standard timer in conjunction with the video. You can even get the video’s overall time using the provided read-only parameter. The timer would, of course, need to be paused/restarted and skipped ahead if you performed these actions to the video, but this is fairly easy with the recently added (few months back) timer APIs “timer.pause” and “timer.resume”. It’s possible that the video and timer ending won’t mesh up to the exact millisecond, but it should be undiscernable to the user.
I’m just excited that we can now use videos almost as “cutscenes” with text or other elements outside the video content area… even custom buttons and things to manage the video! OK, maybe not other display objects overlaying the video (haven’t actually tried this yet, maybe it IS possible?). Nonetheless, great work and many thanks Ansca!
Brent Sorrentino
Ignis Design
Are event listeners working with native.newVideo() ?
I have tried adding one as the 5th parameter native.newVideo(x,y,w,h, listener) and also with addEventListener( “touch”, listener )
Events don’t seem to be triggered and being device only hard to debug.
I have tested the listener code by substituting native.newVideo, with display.NewRect( ) and the code works OK
Hi all,
Me again, sorry about this, but I would like to know if there is any way to overlay other display objects on top of the video playback, for instance: buttons
Thanks!
Can anyone confirm that this locks up the vide playback after playing the same clip 4 times??? even locks up the full screen video player too…
Could be something in my code but never had the same issue using the fullscreen video player i.e.
media.playVideo( name ,system.DocumentsDirectory, false, onComplete )
if this is a known bug then let me know
@Dominic. Hello. I have the same problem, 4 clips and the fifth never plays. Hope someone knows how to solve it.
Right now, newWebView doesn’t work on devices. 90%-95% of the time it crashes my app. Hopefully they will get working on this as this API is being promoted as a feature.
I’ve seen this question a few times…any way to put a button over the video object?? Also, I’ve tried adding a video object to “scrollView” but doesn’t seem to work…is it possible to drag the video object?
Thanks.
Daily build # 736 includes new options for newVideo() function but no document yet
We need new example of both newWebView() and newVideo() includes all option and metiods.
Regards,
Bader
Anybody have an idea how to add the phase listener to a video object? As Bader said, the new build says it supports it but no documentation. I assumed this:
video:addEventListener( “video”, whatever)
but doesn’t work.
According to the native.newVideo() documentation, it supports Android in addition to iOS. I just want to confirm if that is indeed true? I tried running some test on my Android phone, but it just shows a blank black screen. The same code runs on iOS.
I have been having a hard time figuring out if the problem is that it’s not supported on Android, or incompatible video format on the Android.
Thx!
It’s not yet available on Android or Mac. But it is high on our todo list.
Any idea when this will work in the simulator? Is that high on your priority list? Thanks!
I’m asking specifically about native video playback
I’ve gotten the video listener to work but it only fires once. If i play a video and listen for the “ended” event, it works the first time, but when I play the video a second time the listener isn’t triggered. Is this a known issue?
what about native videocontrols (play, pause, back, forth) in native.newVideo? any chance to use them like in media.playVideo().
Is there an example of the webView listener stuff in action. Both the HTML/JS and the listener that does something in corona (like show an alert or something).
@Jonathan Beebe mentions the syntax needs to change and I was just wondering if there was a full example like the one for webPopup. I have been tying to get it to do something and have so far not been able to get the new webview to listen for my form submits like I was able to do with webPopup.