HTML5 / Streaming with jwplayer - suddenly stopped working for iPad?

**sethwb** · Jan 17, 2012 18:00

Hey guys I have a streaming video from a webcam that our users recently said had stopped working on an iPad. I can't figure out for the life of me what the heck is going on. I rebuilt the code even just to make sure. I think I just need a second set of eyes, does anyone see anything obviously wrong here? (I edited out the location of the servers, sorry boys and girls I would share if I could, besides it's really not very interesting) Thx

Code:

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			body {margin:0px;padding:0px;width:100%;}
		</style>
	</head>
	<body>
		<script type='text/javascript' src="jwplayer.js"></script>
		<div id='mediaspace'>This text will be replaced</div>

		<script type='text/javascript'>
		  jwplayer('mediaspace').setup({
		    'file': 'xxxxx.xxxxx',
		    'image': 'http://xxxxx.xxxxx.com/xxxxx/xxxxx.png',
		    'streamer': 'rtmp://xxxxx.xxxxx.com:80/xxxxx',
		    'controlbar': 'bottom',
		    'width': '581',
		    'height': '350',
		    'autoplay': 'true',
		    'modes' : [
		    	{type: 'flash', src: 'http://xxxxx.xxxxx.com/xxxxx//xxxxx/player.swf'},
		    	{type: 'html5', config: {
					'file': 'http://xxxxx.xxxxx.com:80/xxxxx/xxxxx/playlist.m3u8',
					'provider': 'http',
			    	'controlbar': 'none'
		    		}
		    	}
		    ]
		  });
		</script>
	</body>
</html>

Thanks in advance.

**Stomme poes** · Jan 18, 2012 04:21

Have you checked online that there isn't a known issue/bug with HSL? (this is Apple's proprietary HTML5-video streaming protocol, which is the only way to get streaming video on Apple devices (otherwise Flash has a protocol as well of course))

I don't see anything blatently wrong with what you have... I assume the .m3u8 ending is correct?

Do you know anyone with an iAnything that can test? It doesn't have to be an iPad, it can be iPhone or iPod as well. They ideally all use the same protocol. The user says the video has stopped entirely? Or that it doesn't stream?

When creating HTML5 video, a download link is advisable as the "fallback content" of the <video> tag, which JWPlayer might already be doing. If you view your source with a debugger like Chrome developer tools or whatever Safari has, do you see the <video> tags built into the HTML source? Is there a download link? If so, can you click it and view the saved video/playlist? This way can help check that the problem isn't with your file but with streaming instead.

Also, if your <head> html is really that (dunno if you were just posting something light to show the problem):

Code:

	<head>
		<style type="text/css">
			body {margin:0px;padding:0px;width:100%;}
		</style>
	</head>

consider adding in <meta charset="utf-8"> as the first line after the opening <head>. Also consider adding the lang attribute with the page language to the <html> tag as well. Neither of these have anything to do with your problem though, just a note.

**sethwb** · Jan 18, 2012 09:12

The Stream actually works if you hit it directly. I believe it's something with the jwplayer that is preventing the video from being loaded properly.

I checked, so here's the full code:

Code:

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			body {margin:0px;padding:0px;width:100%;}
		</style>
	</head>
	<body>
		<script type='text/javascript' src="jwplayer.js"></script>
		<div id='mediaspace'>This text will be replaced</div>

		<script type='text/javascript'>
		  jwplayer('mediaspace').setup({
		    'file': 'radissonblu.stream',
		    'image': 'http://ext1.mortenson.com/sitecam/Mortenson.png',
		    'streamer': 'rtmp://stream.mortenson.com:80/radissonblu',
		    'controlbar': 'bottom',
		    'width': '581',
		    'height': '350',
		    'autoplay': 'true',
		    'modes' : [
		    	{type: 'flash', src: 'http://ext1.mortenson.com/sitecam//New/player.swf'},
		    	{type: 'html5', config: {
					'file': 'http://stream.mortenson.com:80/radissonblu/radissonblu.stream/playlist.m3u8',
					'provider': 'http',
			    	'controlbar': 'none'
		    		}
		    	}
		    ]
		  });
		</script>
	</body>
</html>

**sethwb** · Jan 18, 2012 09:47

I just noticed something:

The problem appears to occur randomly where the play button overlay simply does not appear, so you can't click it to start playing.

Also something strange about this, I have 'autoplay' set to 'true' so I'm not sure why we have to click it to start the video. Shouldn't this thing play as soon as the detection script finishes connecting?

**Stomme poes** · Jan 18, 2012 14:21

Nothing in your code stands out for me, but I don't work much with jwplayer.

Autoplay indeed should start playing automatically (unless there are special rules for playlists), however it's also possible that a browser could block that.

You might be able to find out if there's an iBug that's known already at the forums. You'd definitely want to know if the problem is the player or the browser.

**sethwb** · Jan 19, 2012 10:17

So I found some answers:

1. Apple doesn't allow autoplay when opening video with HTML5 players. This is why it wasn't working with the player.

2. I've been testing a basic client device detection method (we are targeting a very specific set of devices, so we should be OK in the long run with this method) - it allows you to say "if iPad or iPhone" open a direct link to the video in a new window, which autoplays by default on iOS devices.

I like jwplayer, but you'd think they would put this out in their documentation or something? Perhaps they were afraid it would drive users away from it, which is a valid point considering the number of users I've encountered that complain when they have to click twice to play a video (first the link to the webcam, which opens in a lightbox in this case, and then play on the video to start playing). At first glance I didn't think it was an issue, but that's the feedback I'm getting so here I am.

**Stomme poes** · Jan 19, 2012 11:42

I like jwplayer, but you'd think they would put this out in their documentation or something?

I would say, yes, it should, even if it's some decision by Apple. You should suggest it to them.

And the user feedback you're getting is valuable and matters, which reinforces the first suggestion.

I'm glad you posted what you discovered, as Sitepoint threads tend to show up in Google etc, so hopefully this helps the next person running into this same issue.

**sethwb** · Jan 19, 2012 14:02

Thanks Stomme!

User Tag List

Thread: HTML5 / Streaming with jwplayer - suddenly stopped working for iPad?

Thread Tools

Display

Hybrid View

HTML5 / Streaming with jwplayer - suddenly stopped working for iPad?

Bookmarks

Bookmarks

Posting Permissions