Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Multiple Players in Same Page

Hi ,
I am using the following code for running multiple played in same page but its not working.
Please help me if i am missing something

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jwplayer.js"></script>
<video height="270" id="player1" src="video.mp4" width="480" ></video>

<video height="270" id="player2" src="video1.mp4" width="480"></video>

<script type="text/javascript">
$('video').jwplayer({
flashplayer:'player.swf'
});
</script>

28 Community Answers

Up Down

JW Player

User  
0 rated :

Infact the html page is not showing anything . :(

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

@Lisa – jquery.jwplayer.js is our HTML5 beta player, and it is deprecated. You should download 5.7 and use that instead – http://www.longtailvideo.com/players/jw-flv-player/

Up Down

JW Player

User  
0 rated :

@Ethan : i have downloaded the 5.7 version and am using the jwplayer.js
Now i am using the following code still video is not running in jwplayer.

<html>
<script type="text/javascript" src="jwplayer.js">
</script>
<body>
<video class="jwplayer" src="video.mp4" poster="image.jpg" autoplay>
</video>
</body>
</html>

Up Down

JW Player

User  
0 rated :

@Lisa

do you have a test link to look at?

Up Down

JW Player

User  
0 rated :

Here is how I did it....

<div id='mp3player'><div id="player1"></div></div>
<script type="text/javascript">
jwplayer('.mp3player').setup({
'flashplayer': '/files/jwplayer/player.swf',
'id': 'player1',
});
</script>
<div id='videoplayer'><div id="player2"></div></div>
<script type="text/javascript">
jwplayer('.videoplayer').setup({
'flashplayer': '/files/jwplayer/player.swf',
'id': 'player2',
});
</script>

Up Down

JW Player

User  
0 rated :

@Willie : No i am still making a POC . I have a folder in which jwplayer.js , player.swf and video files are kept.
Now when i run the code i posted , it is running the video but not in JWplayer.
And i need to run the video in JWPlayer.
My basic requirement is to run all the videos in JWPlayer for all browsers.
I am using fallback mechanism where i will be loading videos in .mp4,.ogv and .webm formats all of which should run in JWPlayer for all HTML5 enabled/disabled browsers.
Can you help me out?

Up Down

JW Player

User  
0 rated :

<script type="text/javascript" src="jwplayer.js">
</script>
<video width="365" height="266" controls="controls" id="jwplayer" poster="image.jpg">
<source src="video.ogv" type="video/ogv" />
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" width="600" height="338" wmode="transparent" data="player.swf?file=video.mp4&image=image.jpg">
<param name="movie" value="player.swf?file=video.mp4&image=image.jpg"/>
<param name="wmode" value="transparent" />
</object>
Your browser does not support the video tag. If want you can put fallback method instead of this line....
</video>
<br/>
<video width="365" height="266" controls="controls" id="jwplayer" poster="image.jpg">
<source src="video.ogv" type="video/ogv" />
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" width="600" height="338" wmode="transparent" data="player.swf?file=video.mp4&image=image.jpg">
<param name="movie" value="player.swf?file=video.mp4&image=image.jpg"/>
<param name="wmode" value="transparent" />
</object>
Your browser does not support the video tag. If want you can put fallback method instead of this line....
</video>


This is the code i am using . In fallback mechanism , videos are running fine in JWPlayer but for video tag , video is running but not in jwplayer

Up Down

JW Player

User  
0 rated :

@dan : i tried to use your code , but there is no video link provided there or i m getting it . Also , i have specified my main problem here . Your help will be much appreciated , Thanks ,...

Up Down

JW Player

User  
0 rated :

the video link is 'file': 'video.mp4',

I had to use div containers to call jwplayer.

<div id="video"><div id="player1"></div></div>

<div id="video"><div id="player2"></div></div>

Up Down

JW Player

User  
0 rated :

try putting each DOM <video> in a <div>....

Up Down

JW Player

User  
0 rated :

The video tag does not let you use an outside player....it uses what the browser defaults are.... to do what you need, I think this is the best way

bc.. <div id="demo1"></div>

<script type="text/javascript">
jwplayer("demo1").setup({
'modes': [
{'type': 'html5'},
{'type': 'flash', 'src': '/files/jwplayer/player.swf'},
{'type': 'download'}
],
'flashplayer': "player.swf",
'image': "thumb.jpg",
'height': '365',
'width': '266',
'levels': [
{ 'file': "video.mp4" },
{ 'file': "video.webm" },
{ 'file': "video.ogv" }
]
});
</script>
<br />
<div id="demo2"></div>

<script type="text/javascript">
jwplayer("demo2").setup({
'modes': [
{'type': 'html5'},
{'type': 'flash', 'src': '/files/jwplayer/player.swf'},
{'type': 'download'}
],
'flashplayer': "player.swf",
'image': "thumb.jpg",
'height': '365',
'width': '266',
'levels': [
{ 'file': "video.mp4" },
{ 'file': "video.webm" },
{ 'file': "video.ogv" }
]
});
</script>


Up Down

JW Player

User  
0 rated :

oops... found this code

bc.. <script src="/jwplayer/jwplayer.js" type="text/javascript"></script>

<video id="mediaplayer"
width="480"
height="270"
src="http://content.bitsontherun.com/videos/bkaovAYt-364766.mp4"
poster="http://content.bitsontherun.com/thumbs/bkaovAYt-480.jpg">
</video>

<script type="text/javascript">
jwplayer('mediaplayer').setup({
'flashplayer': 'http://player.longtailvideo.com/player.swf'
});
</script>


Up Down

JW Player

User  
0 rated :

so try this....

bc.. <script src="/jwplayer/jwplayer.js" type="text/javascript"></script>

<video id="mediaplayer1"
width="480"
height="270"
poster="http://content.bitsontherun.com/thumbs/bkaovAYt-480.jpg">
<source src="video.ogv" type="video/ogv" />
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
</video>

<script type="text/javascript">
jwplayer('mediaplayer1').setup({
'flashplayer': 'http://player.longtailvideo.com/player.swf'
});
</script>

<video id="mediaplayer2"
width="480"
height="270"
src="http://content.bitsontherun.com/videos/bkaovAYt-364766.mp4"
poster="http://content.bitsontherun.com/thumbs/bkaovAYt-480.jpg">
</video>

<script type="text/javascript">
jwplayer('mediaplayer2').setup({
'flashplayer': 'http://player.longtailvideo.com/player.swf'
});
</script>


Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

@Dan – Thanks, your code works fine.

@Lisa – If you are having issues, you are going to need to provide links.

Up Down

JW Player

User  
0 rated :

@Ethan,Dan: i need to load the videos in video tag only . not in javascript. :(

Up Down

JW Player

User  
0 rated :

I mean what if i dont want to differentiate between 2 video tags by their id . Cant i have a universal same javascript call for all teh video tags like
<script type="text/javascript">
$('video').jwplayer({
flashplayer:'player.swf'
});
</script>

Up Down

JW Player

User  
0 rated :

@Dan : Like for 2 different video tags , u r using 2 different javascript codes for loading the JWPlayer . I want only one single javasciprt to work for all video tags .

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Please. A link. I am begging you.

Up Down

JW Player

User  
0 rated :

@Ethan : pls dnt embarass me . i am using dis code fr my clg prjct . i dnt knw hw to upload on net . pls bear with me . Am i still not able to exlain u my prblm?

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

You can’t use one JS to control all of the players on the page. K?

Up Down

JW Player

User  
0 rated :

@Ethan,Dan : Ok thanks a lot .. :)

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

NP

Up Down

JW Player

User  
0 rated :

I too would like to know how to reuse one instance of an id, or call it a class of jwplayer, that is a repeated object on the page, and simply use the player.sendEvent('LOAD', etc. to change the audio file that is loaded. It seems inefficient to have to create 12+ instances of jwplayer on a page, when all I want to do is feed it a new source file .mp3
Anyone have an example of how they've accomplished this?

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

There isn’t a simple way to do this I’m afraid.

Up Down

JW Player

User  
0 rated :

You're in luck

I have on my web site an example in which I instantiate the JWPlayer once and then use the load feature to load six players via their own ID.

here is what I use for my 3D rotating cube in which each face can play a video.

bc.. <script>

"use strict";

var options =
{
/*----------layout for player -------*/
width:'400',
height:'400',
/*----------behaviour for player ----*/
stretching:'fill',
icons:'false',
mute: 'true',
/*------------ content for player ------*/
controlbar:'none',
image:'images/second.jpg',
/*----------------- action for the player -----------*/
modes: {type: "html5"}
};
/*--------- instantiation of the players with the options from the above 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>



There you see one instance of the options and six different players each with their own ID.

To see this in action, feel free to visit my web site wwwmirana.net
then select the experimental section and click on 'the 3D rotating cube".

hope this is helpful for you.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Is this using jQuery?

Up Down

JW Player

User  
0 rated :

nope

just html5 and JavaScript

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

ok

This question has received the maximum number of answers.