Video HTML5 target on Mobile

Haxe
#1

This one took me a lot of time.
I’m just doing this simple code:

		var netConnection = new NetConnection ();
		netConnection.connect (null);

		var netStream = new NetStream(netConnection);
		netStream.client=this;
		var video = new Video (640, 480);
		addChild (video);

		video.attachNetStream (netStream);
		netStream.play ("test.mp4");

And I can’t make it work for HTML5 on iOS / Android in any browser.
Some notes:

  • The mp4 works fine if I manually create an html with a video tag. Therefor is not the codec.
  • I’ve tried -Ddom -Dcanvas with no luck.
  • It works fine on any browser in desktop.

Any clue?
Thanks.

#2

Have you tried the “PlayingVideo” sample yet?

openfl create PlayingVideo
cd PlayingVideo
openfl test html5

Is it possible “test.mp4” is the wrong path? Should it be “assets/test.mp4”, or something different?

#3

It’s getting better. Thanks! In that sample the video shows up on screen but, still doesn’t play.
Do I have to call an extra function for mobile?
And…still can’t see the difference with my code. I replaced the sample project with my video and it works (except for the play thing).

#4

I think video on mobile requires user interaction to play. I should trying the “PlayingVideo” sample, and make changes to accommodate for this. You may need to do something like this:

addEventListener (MouseEvent.MOUSE_DOWN, function (_) {
    
    video.play ();
    
});

I’ll try and take a look myself if I can

#5

Thanks a lot. It was that.
Still don’t know what was wrong with my code (it worked perfect on desktop). But I’ll use this sample code instead.

(netStream.resume(); instead of video.play())

#6

I’m experiencing a similar problem.

I have taken a cue from the above and added a button that initiates playback in response to user touch input.

Using the PlayingVideo sample, compiling to html5, I can see the video playback on iOS browsers but not on Android devices. I have tired both Chrome and Firefox on android, and in Chrome and Firefox both the video shows up as a black surface (see error below). Additionally, there is audio playback in Firefox for Android. The OS and Browsers in question are all current.

Using firefox’s webIDE I see the following errors (repeated many times) in the console:

Error: WebGL warning: drawArrays: Active texture 0 for target 0x0de1 is 'incomplete', and will be rendered as RGBA(0,0,0,1), as per the GLES 2.0.24 $3.8.2: The dimensions of `level_base` are not all positive. PlayingVideo.js:49368:3
Error: WebGL warning: texImage2D: GetAsSourceSurface or GetDataSurface failed after blit failed for TexUnpackImage.    PlayingVideo.js:8615:1234

That at least explains the black box. But why would this condition be raised?

Also, if I try the -Dcanvas option I see the following error:

NS_ERROR_NOT_AVAILABLE

With the -Ddom option I can get playback on Firefox but not on Chrome (again, for android). ( Oh also, I have tested simply playing the video on all browsers, so its not a codec thing).

Any hints?

(Edit, Update. For the case of firefox, it seems to be this bug https://bugzilla.mozilla.org/show_bug.cgi?id=1395497 which is fixed and slated for the Firefox 59 release. But what about chrome…?)

(Edit 2. Using the chrome tools I see that, even though I am initiating the call the netStream.play inside an event handler, chrome on android is throwing this error:

PlayingVideo.js:68386 Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture.

I am listening for a MouseEvent.MOUSE_DOWN event and calling netStream.play("assets/example.mp4") within its handler. Still no joy.)

1 Like
#7

I was able to get video working on android / ios a few weeks ago.

I set up the same net stream stuff and added some playstatusEvent listeners on the stream.client.

        //possibly overkill
		var clientObj:Dynamic = {
		  'onMetaData': this.playstatusEvent,
		  'onImageData': this.playstatusEvent,
		  'onPlayStatus': this.playstatusEvent,
		  'onCuePoint': this.playstatusEvent
		};	
		stream.client = clientObj;

 function playstatusEvent(e : Dynamic) : Void {
  if (e.code == "NetStream.Play.canplay") 
    //create a fullscreen button. Clicking the button calls `stream.resume()`

  if (e.code == "NetStream.Play.timeupdate" && e.position > 0)
    //(the video is playing beyond the first frame)
    //hide the button.

I also found that I had to modify openfl.net.NetStream to include

       __video.setAttribute('crossorigin', 'anonymous');

to properly load videos from my other domains…

#8

Woah there. How are you using the resume function?

This is my code

	public function new() {
		super();

		video = new Video ();
		addChild (video);
		
		var netConnection = new NetConnection ();
		netConnection.connect (null);
		
		netStream = new NetStream (netConnection);
		netStream.client = { onMetaData: client_onMetaData };
		netStream.play ("video/example.mp4");
		
	}
	
	private function client_onMetaData (metaData:Dynamic) {
		video.attachNetStream (netStream);
		
		video.width = video.videoWidth;
		video.height = video.videoHeight;
		
		video.x = (800 -video.width) / 2;
		video.y = (600 -video.height) / 2;
		
		Actuate.timer(3).onComplete(stage2); //BTW, is there an event for "video finished"?
		
	}

If I put the “netStream.play()” inside of a (user-controlled) button event and my user goes bananas with the clicking of said button, everything crashes. How do you use the “resume” method?

Thanks!

#9

Can we Live stream video in Html5 target using Red5 Server or anyother ?

#10

It is possible that may work by pointing your video to a different source URL, but if you need any adjustments/changes to how we handle video internally to support this case, let me know :slight_smile:

#11

I will surely try this in next project - i am trying to switch it to Openfl.

#12

Neither NetConnection nor NetStream dispatch NetStream.Play.canplay event, and resume works only after a pause request: please can you explain your procedure?

I think that the user action to play sounds and videos is only needed to set the focus on the application, and this already happens in my app because you need to activate sounds by touching the button “YES, I want sounds”: video is played later so it should work, but it is not visible, even if in FF I can hear the sound.