I'm trying to get this example working on my website, but are having no luck in the script seeking and finding in the playlist. The playlist plays, however, it won't seek.
It is located at the following link:
Please help.
Mimicking Linear TV Example
11 replies [Last post]
Posted: Sat, 2011-08-13 16:23
Martin
Reply
Posted: Wed, 2011-08-17 05:30
mark r
Reply
i am trying to implement this on my site as well. i have the playlist loading and the console giving me back a value, but no seeking. i double checked my server and it is sending the files through http streaming... the only problem that i think there may be is the xml playlist, it's media rss and the duration value is in media:content as another parameter with the url, like so:
<item>
<title>You're watching TV</title>
<link></link>
<description></description>
<pubDate>Sun, 07/17/2011 - 07:19</pubDate>
<media:credit role="author"></media:credit>
<media:group>
<media:thumbnail url="XXX.jpg" />
<media:content url="XXX.mp4" duration="XXX" />
<media:content url="XXX.webm" duration="XXX" />
</media:group>
<jwplayer:provider>http</jwplayer:provider>
</item>
what could the issues be?
Posted: Wed, 2011-08-17 08:01
remco
Reply
For seeking to work you do need to have installed a server extension that enables pseudostreaming (see http://h264.code-shop.com/trac).
Furthermore, as far as I am aware there is no pseudostreaming implementation for webm.
Posted: Tue, 2011-09-20 01:27
Sence C
Reply
Looking for solution to mimick linear tv. I.e every viewer see same thing at the same time.
I', a content producer so I don't know much about delivery. I thought maybe rtmp or http streaming but I cant get anything to work. Tried cloudfront as well but still don't have enough knowledge to pull it together.
Currently using bits on the run player at my site but I need a continuous playlist for at least 10 hours a day. i.e. based on the time of day the player seeks to specific file at specific time. Any help would be appreciated.
current site http://www.sidetickvod.com
Posted: Tue, 2011-09-20 04:05
remco
Reply
The most recent documentation for this functionality can be found here: http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/17247/mimicking-linear-tv
Please note that it requires a reasonable level of understanding of JavaScript to implement, so if you are not a developer, you should engage someone who does. Furthermore I notice that you run WordPress on your site. WordPress strips away third party JavaScript, so you would also need to modify WordPress so it doesn't do that any longer.
Posted: Tue, 2011-09-20 10:24
Sence C
Reply
Thanks remco. Is there any way to use the BOTR player and playlist to emulate linear tv?
Posted: Tue, 2011-09-20 11:19
Sence C
Reply
UPDATE: I got my code (below) to be recognized. Now The whole page except the player and Background disappears.
I also get the "Task queue failed at step 5:Playlist could not be loaded: HTTP Status 404 Not Found" Message I'm assuming the player can't find or read the XML file?
Here is my embed code:
<div id="container"></div>
<script type="text/javascript">
jwplayer("container").setup({
controlbar: "none",
file: "/wp-content/uploads/jw-player-plugin-for-wordpress/playlists/content.xml",
flashplayer: "http://sidetickvod.com/wp-content/uploads/jw-player-plugin-for-wordpress/player/player.swf",
height: 360,
width: 640
});
jwplayer().onReady(function() {
var seconds = new Date().getMinutes()*60 + new Date().getSeconds();
var playlist = this.getPlaylist();
var offset = 0;
for (var index=0; index < playlist.length; index++) {
var duration = Math.round(playlist[index]['duration']);
if(offset + duration > seconds) {
this.playlistItem(index);
this.seek(seconds-offset);
break;
} else {
offset += duration;
}
}
});
</script>
Basically same as above (I also embedded the code above and it worked fine which leads me to believe it's def. the file or location of the file.
Here is the XML file:
<rss version="2.0" xmlns:jwplayer="http://developer.longtailvideo.com/trac/" xmlns:media="http://search.yahoo.com/mrss/">
<channel>
<title>RTMP Playlist</title>
<item>
<title>Sideline S2 Ep 2</title>
<description>Original Air Date 9/18/2011. Gerard and Stacey tackle week to of NFL Fantasy football.</description>
<media:content url="sideline_s2_ep2.mp4" />
<media:thumbnail url="http://sidetickvod.com/wp-content/uploads/2011/09/SidelineS2Ep1Thumb.jpeg" />
<jwplayer:provider>rtmp</jwplayer:provider>
<jwplayer:streamer>rtmp://rtmp://s2vpa8rp5llpub.cloudfront.net/cfx/st</jwplayer:streamer>
<jwplayer:duration>960</jwplayer:duration>
</item>
<item>
<title>Easy Card Spot</title>
<description>ESy card 15 sec spot</description>
<media:content url="easy_card.mp4" />
<media:thumbnail url="" />
<jwplayer:provider>rtmp</jwplayer:provider>
<jwplayer:streamer>rtmp://rtmp://s2vpa8rp5llpub.cloudfront.net/cfx/st</jwplayer:streamer>
<jwplayer:duration>15</jwplayer:duration>
</item>
<item>
<title>Out of Work 30 Sec Spot</title>
<description>Out of Work 30 Sec Spot</description>
<media:content url="outofwork.mp4" />
<media:thumbnail url="" />
<jwplayer:provider>rtmp</jwplayer:provider>
<jwplayer:streamer>rtmp://rtmp://s2vpa8rp5llpub.cloudfront.net/cfx/st</jwplayer:streamer>
<jwplayer:duration>21</jwplayer:duration>
</item> </channel>
</rss>
Posted: Wed, 2011-09-21 03:15
remco
Reply
To make it work with Bits on the run you can just embed a Rits on the Run playlist and have that followed by only the linear tv code in a separate <script> tag. So like:
<script>http://content.bitsontherun.com/players/some_embed_code.js</script>
<script>
jwplayer().onReady(function() {
var seconds = new Date().getMinutes()*60 + new Date().getSeconds();
var playlist = this.getPlaylist();
var offset = 0;
for (var index=0; index < playlist.length; index++) {
var duration = Math.round(playlist[index]['duration']);
if(offset + duration > seconds) {
this.playlistItem(index);
this.seek(seconds-offset);
break;
} else {
offset += duration;
}
}
});
</script>
Also, for debugging purposes I recommend that you start looking into the Chrome developer tools or FireBug for firefox, or the Activity Monitor in Safari, which will easily show what file is throwing errors at you.
Posted: Mon, 2011-11-14 16:24
Matt R
Reply
I am trying to implement this type of setup as well for JW player. The function below works correctly but only works if you are pulling one stream to load into the player. If you use a bits on the run playlist it seems to ALWAYS pull the first video from the playlist.
I need the same functionality below but to also work by getting the correct video from the playlist based on a custom variable called start_time that is in the bits on the run XML (example below). I tried messing around with this JS by getting the current time but I don't see any function that I can use to grab the video from the playlist.
It would be nice to grab the video by my custom variable instead of using this function: playlistItem() which only works by passing index.
I also thought about using a combination of these functions:
if( start_time > currentTime)
{
playlistPrev()
// then do seconds lookup
}
else
{
playlistNext()
// then do seconds lookup
}If any one has done this before or can point me in the right direction that would be much appreciated!
Here's the XML example:
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:jwplayer="http://developer.longtailvideo.com/trac/" xmlns:media="http://search.yahoo.com/mrss/">
<channel>
<title>TV</title>
<description></description>
<link>http://content.bitsontherun.com/previews/l76bNgin-HvoXjvI0</link>
<item>
<title>7 Cities Ep. 1</title>
<pubDate>Fri, 23 Sep 2011 21:08:00 -0000</pubDate>
<description>Ep. 1</description>
<media:group>
<media:content bitrate="570" url="conversions/y1aljOSg/videos/wY9Zxohp-1495596.mp4?eee6cc8084bc02b3096443468bd6269a25236a7cc572265bd240c0daeb84ca79120635f9afb8fe9c9f70fe3eebfed5f57e2cf5f65294e23eed351efc433ecdbddc4f29c238c91a9cf0f62a55fdc2b12734f3349c9a11cd6def420b87d076bc728a865b01ff2974417d9f0268e8dec4be" width="480" />
<media:content bitrate="360" url="conversions/y1aljOSg/videos/wY9Zxohp-1495595.mp4?eee6cc8084bc02b3096443468bd6269a25236a7cc572265bd240c0daeb84ca79120635f9afb8fe9c9f70fe3eebfed5f57e2cf5f65294e23eed351efc433ecdbddc4f29c238c91a9cf0f62a55fdc2b12734f3349c9a11cd6def420b87d076bc728a865b01ff2974417d9f026be8dec4be" width="320" />
</media:group>
<jwplayer:provider>rtmp</jwplayer:provider>
<jwplayer:start_time>13:30</jwplayer:start_time>
<jwplayer:duration>1769.26</jwplayer:duration>
<jwplayer:streamer>rtmpe://fms.413C.edgecastcdn.net/00413C/content/</jwplayer:streamer>
<jwplayer:image>http://thumbs.bitsontherun.com/wY9Zxohp.jpg</jwplayer:image>
<jwplayer:playlist.image>http://thumbs.bitsontherun.com/wY9Zxohp-120.jpg</jwplayer:playlist.image>
<jwplayer:tags>Drama, Series</jwplayer:tags>
<jwplayer:mediaid>wY9Zxohp</jwplayer:mediaid>
</item>
<item>
<title>7 Cities Ep. 4</title>
<pubDate>Fri, 23 Sep 2011 21:28:00 -0000</pubDate>
<description>Ep. 4</description>
<media:group>
<media:content bitrate="520" url="conversions/y1aljOSg/videos/8g4TfyxH-1495596.mp4?eee6cc8084bc02b3096443468bd6269a25236a7cc572265bd240c0daeb84ca79120635f9afb8fe9c9f70fe3eebfed5f57e2cf5f65294e23eed351efc433ecdbddc4f29c238c91a9cf0f62a55fdc2b12734f3349c9a11cd6def420b879f48b17c188cb359effdd7177e3222c5b97fec9a" width="480" />
<media:content bitrate="350" url="conversions/y1aljOSg/videos/8g4TfyxH-1495595.mp4?eee6cc8084bc02b3096443468bd6269a25236a7cc572265bd240c0daeb84ca79120635f9afb8fe9c9f70fe3eebfed5f57e2cf5f65294e23eed351efc433ecdbddc4f29c238c91a9cf0f62a55fdc2b12734f3349c9a11cd6def420b879f48b17c188cb359effdd7177e3222c6b97fec9a" width="320" />
</media:group>
<jwplayer:provider>rtmp</jwplayer:provider>
<jwplayer:start_time>09:00</jwplayer:start_time>
<jwplayer:duration>1769.06</jwplayer:duration>
<jwplayer:streamer>rtmpe://fms.413C.edgecastcdn.net/00413C/content/</jwplayer:streamer>
<jwplayer:image>http://thumbs.bitsontherun.com/8g4TfyxH.jpg</jwplayer:image>
<jwplayer:playlist.image>http://thumbs.bitsontherun.com/8g4TfyxH-120.jpg</jwplayer:playlist.image>
<jwplayer:tags>Drama, series</jwplayer:tags>
<jwplayer:mediaid>8g4TfyxH</jwplayer:mediaid>
</item>
</channel>
</rss>
Linear TV example JS:
<script>
jwplayer().onReady(function() {
var seconds = new Date().getMinutes()*60 + new Date().getSeconds();
var playlist = this.getPlaylist();
var offset = 0;
for (var index=0; index < playlist.length; index++) {
var duration = Math.round(playlist[index]['duration']);
if(offset + duration > seconds) {
this.playlistItem(index);
this.seek(seconds-offset);
break;
} else {
offset += duration;
}
}
});
</script>
Posted: Tue, 2011-11-15 04:35
remco
Reply
Why don't you just use the Bits on the Run player with this script? I'm afraid we really can't support it when you start building your own playlists with your own players with Bits on the Run when you can also just do this:
<script type="text/javascript" src="http://content.bitsontherun.com/players/FsWGFwkG-SG2qSEyu.js"></script>
<script>
jwplayer().onReady(function() {
var seconds = new Date().getMinutes()*60 + new Date().getSeconds();
var playlist = this.getPlaylist();
var offset = 0;
for (var index=0; index < playlist.length; index++) {
var duration = Math.round(playlist[index]['duration']);
if(offset + duration > seconds) {
this.playlistItem(index);
this.seek(seconds-offset);
break;
} else {
offset += duration;
}
}
});
</script>
Posted: Tue, 2011-11-15 10:47
Matt R
Reply
I am not building my own playlist. I am using a bits on the run playlist and a licenced version of JW player and OVA. I cannot use what you provided becuase it does not function the way I need it to. I have tried that and it always pulls the first video from the playlist regardless of what time it is...
Hmm, if I use your code and put this into a standalone page, things do work:
<html><head>
<script type="text/javascript" src="http://www.iccmtv.com/player/5.7.1896/jwplayer.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
jwplayer("container").setup({
controlbar: "none",
file: "http://content.bitsontherun.com/jwp/BWgJgPA9.xml",
flashplayer: "http://www.iccmtv.com/player/5.7.1896/player.swf",
height: "480",
width: "640"
});
jwplayer().onReady(function() {
var seconds = new Date().getMinutes()*60 + new Date().getSeconds();
var playlist = this.getPlaylist();
console.log("Playlist length: "+playlist.length);
var offset = 0;
for (var index=0; index < playlist.length; index++) {
var duration = Math.round(playlist[index]['duration']);
if(offset + duration > seconds) {
this.playlistItem(index);
this.seek(seconds-offset);
break;
} else {
offset += duration;
}
}
});
</script>
</body>
</html>
There must be something in the page that breaks the API, or perhaps there is a timing issue with playlist loading.
As a check could you set a console.log() line in your script, just like I did in above version? That way we can see if 1) the onReady() function is called and 2) the playlist is loaded at that point.