How to do pre-roll and playlist for iOS (a client-side work-around)

Below is a client-side (browser-based) solution for pre-roll and playlists for iOS devices. This works for VOD-to-live or VOD-to-VOD. (It doesn't work for live-to-VOD.) Switching from one video or stream to another with different audio encoding doesn't work. The transitions aren't seamless; loading takes a few moments.

VOD pre-roll for live stream

<html>
<head>
<title>Pre-roll</title>
<script>
function end(e)
{
var video = document.getElementById("video1");
video.src = "http://[wowza-address]:1935/live/myStream/playlist.m3u8&quot;
video.load();
video.play();
}
</script>
</head>
<body>
<video src="http://[wowza-address]:1935/vod/sample.mp4/playlist.m3u8" controls onended="end(event)" id="video1">
</video>
</body>
</html>

VOD Playlist

<html>
<head>
  <title>Playlist</title>
<script>
var videos="sample2.mp4,sample3.mp4".split(",");
next=-1;

function end(e)
{
var video = document.getElementById("video1");

if (++next==videos.length)
	return;

video.src = "http://192.168.1.7:1935/vod/"+videos[next]+"/playlist.m3u8";
video.load();
video.play();
}
</script>
</head>

<body>
<video src="http://192.168.1.7:1935/vod/sample.mp4/playlist.m3u8" controls onended="end(event)" id="video1">
</video>

</body>
</html>

Originally Published: 10-03-2010.

If you're having problems or want to discuss this article, post in our forum.