Below are two client-side, browser-based example solutions for inserting a VOD pre-roll ad or a VOD playlist before an HLS stream produced with Wowza Streaming Engine™ media server software. This example code 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.
Insert a VOD pre-roll for live stream
<html>
<head>
<title>Pre-roll</title>
<script>
function end(e)
{
var video = document.getElementById("video1");
video.src = "http://[address]:1935/[live-application-name]/myStream/playlist.m3u8"
video.load();
video.play();
}
</script>
</head>
<body>
<video src="http://[address]:1935/[vod-application-name]/sample.mp4/playlist.m3u8" controls onended="end(event)" id="video1">
</video>
</body>
</html>
Insert a 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://[address]:1935/[vod-application-name]/"+videos[next]+"/playlist.m3u8";
video.load();
video.play();
}
</script>
</head>
<body>
<video src="http://[address]:1935/[vod-application-name]/sample.mp4/playlist.m3u8" controls onended="end(event)" id="video1">
</video>
</body>
</html>
