...

View Full Version : Play Youtube videos On a Embedded Player Upon clicking Multiple hyperlinks



7heavens
12-29-2011, 12:42 PM
Hi guys.. I am just starting to learn JavaScript. I wanted to know how to have multiple hyperlinks (Containing links to Youtube Videos) that when clicked, cause the corresponding videos to play on the Youtube Player Embedded on the site. I hope my question is not too confusing. Thank you in advance!

P.S.
I saw some Source Code relating to this on StackOverflow and copied it and couldn't get it to work.. Here's my source code.


<html>
<head>
<title> Sample Page </title>
<script>
// Get element holding the video (embed or object)
var player = document.getElementById("MOVIE");

//Create a simple function and check if player exists
function play() {
if(player) {
player.playVideo();
}
}
</script>
</head>
<body>
<object width="420" height="315"><param name="MOVIE" value="http://www.youtube.com/v/HsQIoPyfQzM?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/HsQIoPyfQzM?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</br></br>
<a href="http://youtu.be/sPvqNMb4StI" onclick="play()"> THIS IS FIRST Video Link </a></br></br>
<a href="http://youtu.be/w7_Ccu21QVs" onclick="play()"> THIS IS SECOND Video Link </a>
</body>
</html>

chump2877
12-31-2011, 12:09 PM
In XHTML, there are no built-in javascript/DOM functions for manipulating video. You have to pick a video player, and then use the JavaScript API for that player. So, if you are using YouTube videos, then you will want to explore the YouTube API: http://code.google.com/apis/youtube/js_api_reference.html.

Here's a working example: http://code.google.com/apis/youtube/js_example_1.html
(Hint: check the source code of that page.)

However, if you opt to use HTML5, then you could use the new "video" tag and the DOM functions/properties associated with it:

http://www.w3schools.com/html5/html5_video_dom.asp
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_js_prop

xelawho
12-31-2011, 08:22 PM
<html>
<head>
<title> Sample Page </title>
<script>
function play(clip){
document.getElementById("frame").src= "http://www.youtube.com/v/"+clip+"&autoplay=1&rel=0";
}
</script>
</head>
<body>
<object width="425" height="355"><param name="movie" value=""></param><param name="wmode" value="transparent"></param><embed id ="frame" src="" type="application/x-shockwave-flash" border="1" wmode="transparent" width="425" height="344"></embed></object><br>
<a href="#" onclick="play('6Zx39v3JUUI'); return false"> THIS IS FIRST Video Link </a><br>
<a href="#" onclick="play('VVp0eo0vN8U'); return false"> THIS IS SECOND Video Link </a>
</body>
</html>

schulrog
11-05-2012, 02:36 AM
hi there,

this works perfect in firefox but unfortunately not at all in IE/Chrom/safari. any idea how to make the code compatible with the other browsers?

rnd me
11-05-2012, 07:12 AM
afaik, only <video> has a standards-defined control API.

the cross-platform way is to set the video to autoplay (there's attribs/flashvars for this in just about every embed code), and then inject the embed code with javascript to show/play the movie when needed.

otherwise, you'll have to collect several methods, maybe even javascript libs like embedswf, jplayer, jw.js, qt's js lib, etc, to abstract the play() into the 2-5 versions you choose to support...

xelawho
11-05-2012, 03:27 PM
it seems to me that simplest would be to mimic the embed code that youtube provides on their page...


<html>
<head>
<title> Sample Page </title>

</head>
<body>
<iframe id="theframe" width="420" height="315" src="" frameborder="0"></iframe>
<br>
<a href="#" onclick="play('6Zx39v3JUUI'); return false"> THIS IS FIRST Video Link </a><br>
<a href="#" onclick="play('VVp0eo0vN8U'); return false"> THIS IS SECOND Video Link </a>
<script>
function play(clip){
document.getElementById("theframe").src= "http://youtube.com/embed/"+clip+"?autoplay=1";
}
</script>
</body>
</html>


of course, for more functionality you would want to use the API, but the above is a simple enough cross browser solution imo



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum