HTML5 Video AutoPlay in the native webview

Solar2D General Questions/Discussion
#1

hi,

I am using native webview to display a local html with a local mp4 video.

Here is my HTML:

<video id=“rfVideo6” class=“slideObj” muted playsinline>

 <source src="…/video/media6.mp4" type=“video/mp4”>

 Your browser does not support the video tag.

</video>

And here is the javascript I put somewhere I want to autoplay the video:

setTimeout(

function () { 

playVideo6(); 

}, 100

);

Here is the playVideo6 JS:

function playVideo6(){

if ($("#rfVideo6").length > 0){

var myVideo6=document.getElementById(“rfVideo6”); 

$(’#rfVideo6’).show();

   myVideo6.play(); 

   }

}

I tried to upload the same files to a web hosting and check this on iOS 10 Safari. The video can play automatically when the setTimeout fired. However, it doesn’t work with corona webview on the same iOS 10.

Is this a bug? or do I miss anything?

My corona sdk build is 2017.3067 (2017.3.29)

Thanks,

Alex

#2

Does the webview execute javaScript? Try using a simpler javaScript to make sure - or at least set a debug point.

#3

I tried to put an alert before and after the myVideo.play(). I can see both alert show but the video didn’t play within the webview on iOS 10.

#4

Yes, our webViews process JavaScript. Is the HTML5 code local or is it being downloaded from a web server?

#5

I’m not up to speed, but there is “old” and “new” way to do a webView in Corona, since a couple of months. Maybe that could be part of the problem?

#6

Hi Rob, both html, javascript and video files are local.

I know iOS disabled the auto play (or calling the video.play() without any click) of the video. But it should work on iOS 10 with the “muted playsinline” parameters. And it actually works if I tried to put everything into a web hosting and load it from iOS Safari. But it doesn’t work if I load everything locally in the corona webview. Is the webview the same core as the iOS Safari?

Thanks,

Alex

#7

native.newWebView() uses Safari as it’s core. I’m wondering if it can’t find the file. Remember your app is sandboxed. You may need to use system.pathForFile() to get an absolute path to the video to provide as the source.  I’m not sure if you’re HTML and video are all in system.ResourceDirectory or if you’re downloading the video from somewhere. 

Also: $("#rfVideo6") looks like jQuery.  Are you sure your jQuery is loading correctly?

Rob

#8

Get your web code working fine on Chrome before trying to make it work in webView.  I can confirm that html 5 markup for video works just fine in corona webView.  Not sure why you have added the 100ms delay nor why you are micing JS and jQuery code in the same function?

I have many live apps with inline video working just fine.  App is just a shell app loading the mobile version of the websites.

If you want to delay video viewing until a user clicks a button then do something like

$("#myButton").click(function() { &nbsp;$("#myDiv").html('\<video id="rfVideo6" class="slideObj" muted playsinline\>\<source src="http://mydomain/video/media6.mp4" type="video/mp4"\>\</video\>').show(); });
#9

Does the webview execute javaScript? Try using a simpler javaScript to make sure - or at least set a debug point.

#10

I tried to put an alert before and after the myVideo.play(). I can see both alert show but the video didn’t play within the webview on iOS 10.

#11

Yes, our webViews process JavaScript. Is the HTML5 code local or is it being downloaded from a web server?

#12

I’m not up to speed, but there is “old” and “new” way to do a webView in Corona, since a couple of months. Maybe that could be part of the problem?

#13

Hi Rob, both html, javascript and video files are local.

I know iOS disabled the auto play (or calling the video.play() without any click) of the video. But it should work on iOS 10 with the “muted playsinline” parameters. And it actually works if I tried to put everything into a web hosting and load it from iOS Safari. But it doesn’t work if I load everything locally in the corona webview. Is the webview the same core as the iOS Safari?

Thanks,

Alex

#14

native.newWebView() uses Safari as it’s core. I’m wondering if it can’t find the file. Remember your app is sandboxed. You may need to use system.pathForFile() to get an absolute path to the video to provide as the source.  I’m not sure if you’re HTML and video are all in system.ResourceDirectory or if you’re downloading the video from somewhere. 

Also: $("#rfVideo6") looks like jQuery.  Are you sure your jQuery is loading correctly?

Rob

#15

Get your web code working fine on Chrome before trying to make it work in webView.  I can confirm that html 5 markup for video works just fine in corona webView.  Not sure why you have added the 100ms delay nor why you are micing JS and jQuery code in the same function?

I have many live apps with inline video working just fine.  App is just a shell app loading the mobile version of the websites.

If you want to delay video viewing until a user clicks a button then do something like

$("#myButton").click(function() { &nbsp;$("#myDiv").html('\<video id="rfVideo6" class="slideObj" muted playsinline\>\<source src="http://mydomain/video/media6.mp4" type="video/mp4"\>\</video\>').show(); });