View Full Version : Have Multiple Videos On One Page And Have Them Play Back In One Larger Player

08-01-2012, 10:49 PM
I dont know if anyone has run into htis problem or is likely to,
but it something i needed to do so i figured id post it here for anyone who may find it interesting/ useful.

So for the video player functionality we have this div:

<div id='videoPlayback' style='width: 560px; height:315px; background-color: #000000;'><iframe src="http://player.vimeo.com/video/36788063?autoplay=1" width="560" height="315" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

which is controlled by this script:

<script type="text/javascript">
function playVideo(sourceId, targetId) {
if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);}
if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);}
return false;

now to set which videos load in this div:

<div id='selectDemo1' class="not-here" style='display: none'>
<iframe src="http://player.vimeo.com/video/30886424?" width="560" height="315" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

<div id='selectDemo2' class="not-here" style='display: none'>
<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/b7_Hvgzyr2o?version=3&autoplay=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/b7_Hvgzyr2o?version=3&autoplay=1&amp;hl=en_US" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
Any number of videos can be used for this but you get the idea.

now to select the video to be watched currently in the playback div we use anchors:

<a href="#videoPlayback" onclick='return playVideo("selectDemo5","videoPlayback")'><img src="images/australia.png" width="240" height="135" /></a>