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

Auto-Play video from HTML link, then load another video onComplete

Here is my test page: http://www.toddcassetty.com/index_test2.html

This is what I want to happen:
1. The player loads and auto plays the first video (featured_2_h264.mov)
2. Upon clicking the "WATCH OUR REEL" link, the player loads and plays the second video (videos/reel_tcws_2k_h264.mov)
3. At the end of the second video, player loads the first video, and displays thumbnail, but does not auto play.


Currently, The player loads and auto-plays the first video. Upon clicking the "WATCH OUR REEL" link, the player loads the second video, but doesn't auto-play.

After that, I have no idea how to call the onComplete function..

Any help would be greatly appreciated..

8 Community Answers

Up Down

JW Player

User  
0 rated :

Ok, I got the second video to autoplay, just needed to add 'true' to the play event..

bc.. <a href="#" onclick="player.sendEvent('LOAD', 'videos/reel_tcws_2k_h264.mov');player.sendEvent('PLAY', 'true');return false;">WATCH OUR REEL</a>



So now Im trying to figure out how to add an onComplete function that will load the first video and display the thumbnail, but not auto-play..

I've tried this and it doesn't work:

bc.. <a href="#" onclick="player.sendEvent('LOAD', 'videos/reel_tcws_2k_h264.mov');player.sendEvent('PLAY', 'true');player.onComplete('LOAD', 'videos/featured_2_h264.mov', 'images/thumb_featured.jpg');return false;">WATCH OUR REEL</a>


Can anyone help with this? I don't have much experience with javascript, this is all new to me..

Up Down

JW Player

User  
0 rated :

Can anyone tell me if this is even possible? I've tried just about everything I can think of with my limited knowledge of javascript and I can't get it to work..

Up Down

JW Player

User  
0 rated :

bc.. <!DOCTYPE html>

<html lang="en">

<head>

<script src="http://www.hififusion.com/_global/jwPlayer/jwplayer.js"></script>

</head>

<body>

<div id="container">Loading the player ...</div>
<br />
<a href="#" onclick="jwplayer('container').load({'file':'http://www.toddcassetty.com/videos/reel_tcws_2k_h264.mov', 'image':'image02.jpg'}); jwplayer('container').play('true'); return false;">WATCH OUR REEL</a>
<br />
<button onclick="jwplayer('container').stop();">STOP</button>

<script type="text/javascript">
jwplayer('container').setup
(
{
'flashplayer': 'http://www.toddcassetty.com/player.swf',
'width': '900',
'height': '506',
'file': 'http://www.toddcassetty.com/videos/featured_2_h264.mov',
'image': 'image01.jpg',
'provider': 'http',
'backcolor': '000000',
'frontcolor': '888888',
'lightcolor': 'CCCCCC',
'screencolor': '000000',
'volume': '75',
'bufferlength': '10',
'controlbar': 'over',
'stretching': 'uniform',
'viral.onpause': 'false',
'viral.allowmenu': 'false',
'viral.oncomplete': 'false',
'events':
{
'onComplete': function() { if(jwplayer('container').getPlaylistItem()['file'].indexOf('reel_tcws_2k_h264.mov') != -1) { alert('I\'m playing: ' + jwplayer('container').getPlaylistItem()['file']); jwplayer('container').load({'file':'http://www.toddcassetty.com/videos/featured_2_h264.mov', 'image':'image01.jpg'}); jwplayer('container').play('false'); } }
},
'autostart': 'true'
}
);
</script>

</body>

</html>



Up Down

JW Player

User  
1 rated :

Thank You, thank you, thank you!! I had to tweak it just a bit, but its working just like I wanted it to.

If you check this thread again, can you tell me what "return false" does?

Also, was it not possible to add the onComplete function to the code I had before? It works perfectly now, just curious and trying to learn more about the best way to do things.

Thanks a million!

Up Down

JW Player

User  
-1 rated :

bc.. return false;
does something like this...

bc.. When you set the href of an anchor to '#', it means "go to the current
page, at the top" and so the browser will scroll to the top. When you
return false in javascript, it cancels the click action of the
hyperlink, which means when normally it would follow the link ((this
page, top)), it will not do any hyperlink action ((link-following)), so
there's no scrolling. So for those users without javascript, it
doesn't have a chance to return false ((since none of the script will
run at all)), and will "fall through" and do the hyperlink action. In
a lot of cases, an empty href will do what you're looking for ((that
is, nothing, i think, when there is no javascript available)), or
javascript:void(0), or some similar gimmick.


bc.. Also, was it not possible to add the onComplete function to the code I had before? It works perfectly now, just curious and trying to learn more about the best way to do things.


i did use the code that i copied from: *http://www.toddcassetty.com/index_test2.html* so now i'm puzzled...

Up Down

JW Player

User  
0 rated :

Well, you added the onComplete function to the jwPlayer setup code, whereas I was trying to add it to the href link.


Also, you changed the href link code from this:
bc.. <a href="#" onclick="player.sendEvent('LOAD', 'videos/reel_tcws_2k_h264.mov');player.sendEvent('PLAY', 'true');player.onComplete('LOAD', 'videos/featured_2_h264.mov', 'images/thumb_featured.jpg');return false;">WATCH OUR REEL</a>


To this:
bc.. <a href="#" onclick="jwplayer('container').load({'file':'http://www.toddcassetty.com/videos/reel_tcws_2k_h264.mov', 'image':'image02.jpg'}); jwplayer('container').play('true'); return false;">WATCH OUR REEL</a>


Obviously, the way I was trying to implement the "player.onComplete" function wasn't working, but I'm curious about the other syntax and if the "sendEvent" is not a good way to go about it. I got that bit from another thread here, and it was suggested by a LongTail moderator..

I'm guessing, like with any other code, there are a million ways to do anything. Just wondering why one method may be better than the other. Ultimately, I'm just happy that it works, but I'm also trying to understand it better.

Thanks again for your time, I really do appreciate it!

Up Down

JW Player

User  
0 rated :

the v5.3 player with the JW Embedder provides a "shortcut" method for adding events in the embedding code...

i used the v5.3 player API instead of the previous API (sendEvent())...

see:bc.. http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference

Up Down

JW Player

User  
0 rated :

Thank you noone, it was exactly what I've been looking for as well.
I've modified a little bit to fit my needs, here's the code:

bc.. <div id='container'></div>
<div><h2>VIDEO 1</h2>
<a href="#" onclick="jwplayer('container').load({'file':'video1.mp4', 'image':'video1.jpg'}); jwplayer('container').play('true'); return false;"><img src="video1.jpg" height="100" width="200"/></a>
<br /><br />
<h2>VIDEO 2</h2>
<a href="#" onclick="jwplayer('container').load({'file':'video2.mp4', 'image':'video2.jpg'}); jwplayer('container').play('true'); return false;"><img src="video2.jpg" height="100" width="200"/></a>
</div>
<script type="text/javascript">
jwplayer('container').setup({
'autostart': 'false',
'flashplayer': 'mediaplayer/player.swf',
'id': 'playerID',
'width': '450',
'height': '337',
'file': 'video.mp4',
'image': 'video.jpg',
'events':
{
'onComplete': function() { jwplayer('container').load({'file':'video.mp4', 'image':'video.jpg'}); jwplayer('container').play('false');}
}
});
</script>

This question has received the maximum number of answers.