Is there an article somewhere on how to offer multiple videos on one page, but such that only one video plays at a time? For example, let's say there are four videos. The user plays video one, but then wants to play video two instead. How can we configure it so that when the user plays video two, video one will automatically stop playing. Thanks in advance for any help.
Sample code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://www.longtailvideo.com/jwplayer/jwplayer.js"></script>
<title>Multiple Mutually Exclusive JW6 Players Which Stop at End</title>
</head>
<body bgcolor="#EEE">
<div id="container"></div>
<script type="text/javascript">
jwplayer("container").setup({
file: "http://www.longtailvideo.com/jw/upload/bunny.mp4",
image: "http://www.longtailvideo.com/jw/upload/bunny.jpg",
height: 200,
width: 300,
stretching: "exactfit",
events:{
onPlay: function() {
jwplayer('container2').stop();jwplayer('container3').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
<br />
<div id="container2"></div>
<script type="text/javascript">
jwplayer("container2").setup({
file: "http://www.longtailvideo.com/jw/upload/bunny.flv",
image: "http://www.longtailvideo.com/jw/upload/bunny.jpg",
height: 200,
width: 300,
stretching: "exactfit",
events:{
onPlay: function() {
jwplayer('container').stop();jwplayer('container3').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
<br />
<div id="container3"></div>
<script type="text/javascript">
jwplayer("container3").setup({
file: "http://www.longtailvideo.com/jw/upload/bunny.mov",
image: "http://www.longtailvideo.com/jw/upload/bunny.jpg",
primary: "flash",
height: 200,
width: 300,
stretching: "exactfit",
events:{
onPlay: function() {
jwplayer('container').stop();jwplayer('container2').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
</body>
</html>
Thanks! I wonder if I can easily fit our super-long player code into your script...
bc.. <div id="container">
<div id="jwPlayerVideo"></div>
<script type="text/javascript">
var skinFile = "skin.zip" ;
var playerWidth = 450 ;
var playerHeight = 320 ;
jwplayer("jwPlayerVideo").setup({
id: "jwPlayerVideo",
name: "jwPlayerVideo",
autostart: "false",
bufferlength: 10,
width: playerWidth,
height: playerHeight,
backcolor: "FFFFFF",
frontcolor: "FFFFFF",
lightcolor:" FFFFFF",
screencolor: "FFFFFF",
controlbar: "bottom",
skin: skinFile,
icons: "true",
dock: "false",
plugins: {
"captions-1": { state: "false" }
},
allowscriptaccess: "always",
image: "thumb.jpg",
modes: [
{ type: "flash",
src: "player.swf",
config: {
file: "video1.mp4",
streamer: "rtmp://multimedia/",
provider: "rtmp"
}
},
{ type: "html5",
config: {
file: "videos/video1"
}
},
{ type: "download" }
],
events: {
onPlay: function(){
dcsMultiTrack('confidential code goes here');}
}
});
</script>
</div>
Np!
You might be able to…
My code was just an example of this working…
@Linn
I have several examples on my web site where there are multiple players playing a video on a page that only instantiate a single option for the JWPlayer.
The players are differentiated by their ids (ie) player1...player6 that all receive the same initial option and via the load function feature of the JWPlayer will load a different video.
My 3D cubes can and will play 6 different videos at a time.
for the JWP5 version www.starbase-alpha.com/cube4b.html
bc.. <script>
var options =
{
/*----------layout for player -------*/
width:'300',
height:'300',
/*----------behaviour for player ----*/
stretching:'fill',
volume: '30',
/*------------ content for player ------*/
controlbar:'none',
icons: 'true',
skin: 'skins/glow/glow.xml',
image:'images/first.jpg',
/*----------------- action for the player -----------*/
modes: {type: "html5"}
}; /* eof option listing for html5mode */
/*--------- instantiation of player with the option listing --------*/
$jw("div1").setup(options);
$jw("div2").setup(options);
$jw("div3").setup(options);
$jw("div4").setup(options);
$jw("div5").setup(options);
$jw("div6").setup(options);
</script>
for the JWP6 version www.starbase-alpha.com/beta7.html
bc.. var options =
{
/*----------layout for player -------*/
width: '300',
height: '300',
/*------------- behaviour for player ----*/
stretching: 'fill',
autostart: 'false',
controls: 'false',
/*------------ content for player ------*/
image: 'images/first.jpg',
/* -- the folowing is a dummy declaration for media files; they do not exist
doing so prevents an error being generated by the JWPlayer -- */
sources:
[
{file:'0.webm'},
{file:'0.mp4'}
],
};
/*--------- instantiation of the players with the options listing --------*/
jwplayer("div1").setup(options).setMute(true);
jwplayer("div2").setup(options).setMute(true);
jwplayer("div3").setup(options).setMute(true);
jwplayer("div4").setup(options).setMute(true);
jwplayer("div5").setup(options).setMute(true);
jwplayer("div6").setup(options).setMute(true);
/* this is an example of loading a video into the JWPlayer('div5')
<li><a onclick="jwplayer('div5').load({image:'images/first.jpg',sources:[{file:'video/The Best of Enigma1.webm'},{file:'video/The Best of Enigma1.mp4'}]}).play()">
<img src="video/images/bestofenigma.jpg" alt="Abbott & Costello" title="♦ Engima ‐ The Best of Enigma ♦">
</a>
<span><span>Enigma</span><br>Best of Enigma</span><br>
<a class="stop" title=" stop video " onclick="jwplayer('div5').stop()">Stop</a> <a class="stop" title=" switch audio on " onclick="jwplayer('div5').setMute(false)">Audio On</a> <a class="stop" title=" switch audio Off " onclick="jwplayer('div5').setMute(true)">Audio Off</a>
<article class="c1"> </article>
</li>
*/
</script>
not sure if this is helpful for you BUT it is show you that multiple videos are possible to be played on a single page. The key is the load function.
…Or you can copy and paste the code I provided to test…
@Ethan - Thanks for the code. I was able to get it to work as-is, with your videos, but couldn't get our videos to work. I was expecting this to be a bit troublesome.
@Willie - Thanks for your suggestions. Today is my first day working with JWPlayer, so I don't know what version it is. How do I find out?
@Willie - We have 5.10, so I'm trying your first bit of code above. How would I set up each video outside of the script tag, in the body of the page?
@Linn
The best suggestion that I can offer may seem 'crazy' but draw your
page(s) out on paper with everything you want to have to be displayed when a visitor visits that page.
A flow diagram will certainly help and the best program for that is Visio.
Doing so, it will allow you to conceptualize the web site(page[s]).
I use a white-board with different colors.
You have to decide which version to use JWP5 or JWP6 for your web site. IMHO, JWP6 is the better.
feel free to visit my web site and look at the JWP6 portal for with the examples there you'll be able to view the coding used for that particular example. www.starbase-alpha.com which you can view in fullscreen or normal screen mode.
Need a consultant? I am available ;-)
@Willie - We are on JWP5.10 and I have no control over that. Thanks for all the tips.
Do you have an example of where you tried to run this with your videos?
I've been working on localhost but will see if I can deploy it somewhere.
Here's what I've started: http://bit.ly/16f5E3B.
I made some progress. The question now is how to automatically stop a video once another one is started, so that there aren't multiple videos playing at the same time.
If you look at my demo, you will see that I use the JavaScript API to make the players mutually exclusive.
@Linn
I accomplished this with player 6 at http://heustess.com/episodes.htm
@Ethan - I'm making some good progress and will post an update later.
@heustess - Very nice!! It's a little different from what we're trying to accomplish but might come in handy for a future project. Thanks for sharing.
Ok!
Its not working... actually i have a page with tracks listed with its own player ... Now i want to play only one track at a time i.e if i play a new track then the other track will pause automatically!
Please gimme some solutions for this. Thanks.
This JW HTML Config library might be an option as it features auto-pause of all other JW Players on a page when selecting a video to play. Check out: powered-by-haiku.co.uk/?p=189
@aradhana – Please provide an example to where it is not working.
Thanks for everyone's input - I successfully implemented multiple players where each stops the others. http://www.soundsyrup.com/TEST_SITE/Dec_2010/JW_Video3.html
What I'm trying to do now is PAUSE the others - so should I return to a previous video it continues playing from where it left off.
Ethan I tried using the code you pasted at the top of this thread - and thought this snippet might enable a pause instead of a stop:
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
After inserting that, nothing changed, the players still stop and return to zero.
Earlier I tried code that unintentionally forced all the videos to start and stop at the same time, mixing them together:
onPlay: function() {
jwplayer('container2').stop();jwplayer('container3').stop();jwplayer('container2').pause();jwplayer('container3').pause();
},
Any way to pause rather than stop videos ?
Jeff,
I have an example exactly that fits to the tee of what you need; my 3D rotating cube has six players and can play all at once or even pause one at a time.
My web site is currently down as I am updating it to be HTML5.1 validated which I suspect will take me till about Monday?Tuesday.
I am willing to help let me know how to contact you if you wish some help
Jeff, that is weird, mine pauses, not stops.