# Ipad streaming

**URL:** <https://community.wowza.com/t/ipad-streaming/33900>\
**Category:** Wowza Streaming Engine\
**Created:** [January 27, 2010, 8:48pm UTC](https://community.wowza.com/t/ipad-streaming/33900 "2010-01-27T20:48:56Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![daniel\_ortiz](https://avatars.discourse-cdn.com/v4/letter/d/3ab097/32.png) [@daniel\_ortiz](https://community.wowza.com/u/daniel_ortiz)\
**Post date:** [January 27, 2010, 8:48pm UTC](https://community.wowza.com/t/ipad-streaming/33900/1 "2010-01-27T20:48:56Z")

</div>

Hi,

is the current iphone-ipod wowza stream compatible with ipad?

thanks in advanced

---

<div class="post-metadata">

**Author:** ![Alex\_Dobrushin](https://avatars.discourse-cdn.com/v4/letter/a/e9a140/32.png) [@Alex\_Dobrushin](https://community.wowza.com/u/Alex_Dobrushin)\
**Post date:** [January 27, 2010, 9:03pm UTC](https://community.wowza.com/t/ipad-streaming/33900/2 "2010-01-27T21:03:34Z")

</div>

Too early to tell. If it supports HTTP Streaming like the iPod/iPhone, then it most likely playback streams from the Wowza server. If you can get your hands on the iPad, give it a try.

---

<div class="post-metadata">

**Author:** ![Chris\_Gerrish](https://avatars.discourse-cdn.com/v4/letter/c/839c29/32.png) [@Chris\_Gerrish](https://community.wowza.com/u/Chris_Gerrish)\
**Post date:** [April 6, 2010, 8:02pm UTC](https://community.wowza.com/t/ipad-streaming/33900/3 "2010-04-06T20:02:46Z")

</div>

Yes it does, we tested it yesterday. With the iPad, you can use an html5 player and it works right in the webpage without launching the media player.

---

<div class="post-metadata">

**Author:** ![Chris\_Gerrish](https://avatars.discourse-cdn.com/v4/letter/c/839c29/32.png) [@Chris\_Gerrish](https://community.wowza.com/u/Chris_Gerrish)\
**Post date:** [April 9, 2010, 9:14pm UTC](https://community.wowza.com/t/ipad-streaming/33900/4 "2010-04-09T21:14:23Z")

</div>

This is what we used, we took the player code from another site. Hopefully that helps you out.

```auto
 <!DOCTYPE html>
<html>
<head>
	<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=620">
<title>HTML5 Demo: Video</title>
<style>body { 
  font: normal 16px/20px "Helvetica Neue", Helvetica, sans-serif;
  background: rgb(237, 237, 236);
  margin: 0;
  margin-top: 40px;
  padding: 0;
}
section, header, footer {
  display: block;
}
#wrapper {
  width: 660px;
  margin: 0 auto;
  background: #fff url(/images/shade.jpg) repeat-x center bottom;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border-top: 1px solid #fff;
  padding-bottom: 76px;
}
h1 {
  padding-top: 10px;
}
h2 {
  font-size: 100%;
  font-style: italic;
}
header,
article > *,
footer > * {
  margin: 20px;
}
footer > * {
  margin: 20px;
  color: #999;
}
#status {
  padding: 5px;
  color: #fff;
  background: #ccc;
}
#status.fail {
  background: #c00;
}
#status.success {
  background: #0c0;
}
#status.offline {
  background: #c00;
}
#status.online {
  background: #0c0;
}
footer #built:hover:after {
  content: '...quickly';
}
[contenteditable]:hover {
  outline: 1px dotted #ccc;
}
abbr {
  border-bottom: 0;
}
abbr[title] {
  border-bottom: 1px dotted #ccc;
}
li {
  margin-bottom: 10px;
}
#ffad {
  font-size: 90%;
  border: 1px solid #ccc;
  background: #fcfcfc;
  display: block;
  -moz-border-radius-topleft: 25px;
  -webkit-border-top-left-radius: 25px;
  -moz-border-radius-bottomright: 25px;
  -webkit-border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
  color: #000;
  text-decoration: none;
}
#ffad:hover {
  border-color: #919191;
}
#ffad section {
  padding: 20px;
}
#ffad p {
  margin: 10px 10px 10px 100px;
}
#ffad img {
  border: 0;
  float: left;
  display: block;
  margin: 14px 14px 0;
}
#ffad .definition {
  font-style: italic;
  font-family: Georgia,Palatino,Palatino Linotype,Times,Times New Roman,serif;
}
#ffad .url {
  text-decoration: underline;
}
input {
  font-size: 16px;
  padding: 3px;
  margin-left: 5px;  
}
#view-source {
  display: none;
}
body.view-source {
  margin: 0;
  background: #fff;
  padding: 20px;
}
body.view-source > * {
  display: none;
}
body.view-source #view-source {
  display: block !important;
  margin: 0;
}
#demos {
  width: 560px;
  border-collapse: collapse;
}
#demos .demo {
  padding: 5px;
}
#demos a {
  color: #00b;
  text-decoration: none;
  font-size: 14px;
}
#demos a:hover {
  text-decoration: underline;
}
#demos tbody tr {
  border-top: 1px solid #DCDCDC;
}
#demos .demo p {
  margin-top: 0;
  margin-bottom: 5px;
}
#demos .support {
  width: 105px;
}
#demos .support span {
  cursor: pointer;
  overflow: hidden;
  float: left;
  display: block;
  height: 16px;
  width: 16px;
  text-indent: -9999px;
  background-image: url(/images/browsers.gif);
  background-repeat: none;
  margin-right: 5px;
}
#demos .support span.selected {
  outline: 1px dashed #75784C;
}
#demos .support span.safari {
  background-position: 0 0;
}
#demos .support span.chrome {
  background-position: 16px 0;
}
#demos .support span.firefox {
  background-position: 32px 0;
}
#demos .support span.ie {
  background-position: 48px 0;
}
#demos .support span.opera {
  background-position: 64px 0;
}
#demos .support span.nightly {
  opacity: 0.5;
  filter:alpha(opacity=50);
}
#demos .support span.none {
  opacity: 0.1;
  filter:alpha(opacity=10);
}
#demos .tags {
  width: 140px;
}
#demos .tags span {
  font-size: 11px;
  color: #6E724E;
  padding: 2px 5px;
  border: 1px solid #D7D999;
  background: #FFFFC6;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  cursor: pointer;
}
#demos .tags span:hover,
#demos .tags span.selected {
  border: 1px solid #75784C;
  background: #FF7;  
  color: #333521;
}
</style>
</head>
<body>
<section id="wrapper">
	<article>
		<video src="http://server ip:1935/live/iphonemed/playlist.m3u8" width="620" height="352" controls preload></video>
	</article>
	<script>
	var video = document.querySelector('video'),
	togglePlay = document.querySelector('#play'),
	position = document.querySelector('#position'),
	ready = false,
	controls = document.querySelector('#controls'),
	fullscreen = null;
	
	addEvent(togglePlay, 'click', function () {
	if (ready) {
	video.playbackRate = 0.5;
	if (video.paused) {
	if (video.ended) video.currentTime = 0;
	video.play();
	this.value = "pause";
	} else {
	video.pause();
	this.value = "play";
	}
	}
	});
	
	addEvent(video, 'timeupdate', function () {
	position.innerHTML = asTime(this.currentTime);
	});
	
	addEvent(video, 'ended', function () {
	togglePlay.value = "play";
	});
	
	addEvent(video, 'canplay', function () {
	video.muted = true;
	ready = true;
	document.querySelector('#duration').innerHTML = asTime(this.duration);
	
	// note: .webkitSupportsFullscreen is false while the video is loading, so we bind in to the canplay event
	if (video.webkitSupportsFullscreen) {
	fullscreen = document.createElement('input');
	fullscreen.setAttribute('type', 'button');
	fullscreen.setAttribute('value', 'fullscreen');
	controls.insertBefore(fullscreen, controls.firstChild);
	addEvent(fullscreen, 'click', function () {
	video.webkitEnterFullScreen();
	});
	}
	
	});
	
	function asTime(t) {
	t = Math.round(t);
	var s = t % 60;
	var m = Math.round(t / 60);
	
	return two(m) + ':' + two(s);
	}
	
	function two(s) {
	s += "";
	if (s.length < 2) s = "0" + s;
	return s;
	}
	</script>
</section>
</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![Chris\_Gerrish](https://avatars.discourse-cdn.com/v4/letter/c/839c29/32.png) [@Chris\_Gerrish](https://community.wowza.com/u/Chris_Gerrish)\
**Post date:** [April 9, 2010, 9:25pm UTC](https://community.wowza.com/t/ipad-streaming/33900/5 "2010-04-09T21:25:11Z")

</div>

Yeah, I have been using the same iphone setup since July. If it works on an iphone, it should work on an iPad as far as i know. I didn’t change anything in the application.xml to make it work.

---

<div class="post-metadata">

**Author:** ![daniel\_ortiz](https://avatars.discourse-cdn.com/v4/letter/d/3ab097/32.png) [@daniel\_ortiz](https://community.wowza.com/u/daniel_ortiz)\
**Post date:** [April 6, 2010, 4:47pm UTC](https://community.wowza.com/t/ipad-streaming/33900/6 "2010-04-06T16:47:37Z")

</div>

> Too early to tell. If it supports HTTP Streaming like the iPod/iPhone, then it most likely playback streams from the Wowza server. If you can get your hands on the iPad, give it a try.

any update?

Regards

---

<div class="post-metadata">

**Author:** ![John\_Nix](https://avatars.discourse-cdn.com/v4/letter/j/c5a1d2/32.png) [@John\_Nix](https://community.wowza.com/u/John_Nix)\
**Post date:** [April 9, 2010, 7:54pm UTC](https://community.wowza.com/t/ipad-streaming/33900/7 "2010-04-09T19:54:49Z")

</div>

Can you share the code you used to get this working?

I’ve got my server streaming several Axis cameras to a flash player and to the iPhone via a direct URL (http://[server IP]:1935/rtplive/camera.stream/playlist.m3u8). I can’t seem to get my iPad to pickup the stream on a page with HTML5 code.

Thanks…

---

<div class="post-metadata">

**Author:** ![John\_Nix](https://avatars.discourse-cdn.com/v4/letter/j/c5a1d2/32.png) [@John\_Nix](https://community.wowza.com/u/John_Nix)\
**Post date:** [April 9, 2010, 8:17pm UTC](https://community.wowza.com/t/ipad-streaming/33900/8 "2010-04-09T20:17:01Z")

</div>

This is a big help, thanks… [edit]

I got it working. I had to use the stream manager and configure my streams for the live application. Then using your code it started working.

Thanks again for the help!

---

<div class="post-metadata">

**Author:** ![Arnaud\_Leyder](https://avatars.discourse-cdn.com/v4/letter/a/5f9b8f/32.png) [@Arnaud\_Leyder](https://community.wowza.com/u/Arnaud_Leyder)\
**Post date:** [October 1, 2013, 2:34pm UTC](https://community.wowza.com/t/ipad-streaming/33900/9 "2013-10-01T14:34:01Z")

</div>

Hi,

I think it is best to open a new thread in this case, because this one has been incactive for a while.

To help answer your question, for a web page in an iPhone Safari browser, playing inline video is just not supported (see Apple website [https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using\_HTML5\_Audio\_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple\_ref/doc/uid/TP40009523-CH5-SW1](https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1))

Playing audio inline is supported since iOS 4.0

A recent release of Phone gap seems to support AllowInlineMediaPlayback: [http://community.phonegap.com/nitobi/topics/please\_add\_allowinlinemediaplayback\_option\_in\_config\_xml](http://community.phonegap.com/nitobi/topics/please_add_allowinlinemediaplayback_option_in_config_xml).

It could be worth a try. Otherwise I know inline video on iPhone is possible when building a native app (Xcode).

Thanks

Arnaud L.

---

<div class="post-metadata">

**Author:** ![jagadeesha\_kanihal](https://avatars.discourse-cdn.com/v4/letter/j/d9b06d/32.png) [@jagadeesha\_kanihal](https://community.wowza.com/u/jagadeesha_kanihal)\
**Post date:** [October 1, 2013, 3:26pm UTC](https://community.wowza.com/t/ipad-streaming/33900/10 "2013-10-01T15:26:44Z")

</div>

@jinxpoll

can you tell what all the changes you did in stream manager and configuration settings to get it working.

I heard that it is not possible to use video tag to play it inline on the web page/web view on iphone using video tag (possible in ipad though.)

I have some live camera streams which i need to be able view in part of the screen (not full screen) on a custom app developed using phonegap(html,css and JS). and the intension is to use video tag.

But i am having trouble playing it inline.
