Hi,
is the current iphone-ipod wowza stream compatible with ipad?
thanks in advanced
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.
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.
This is what we used, we took the player code from another site. Hopefully that helps you out.
<!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>
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.
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
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…
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!
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)
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.
It could be worth a try. Otherwise I know inline video on iPhone is possible when building a native app (Xcode).
Thanks
Arnaud L.
@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.