Adapt flashplayer video playlist to use thumbnails
Hi
I put the shockwave-flash player in a function so I could have a drop-down video playlist [see CODE]
I am trying to create a video playlist with thumbnails that link to each video, something like
<a onclick="PlayIt('media1/BuckBunny.mp4')">
<img src="media1/BigBuckBunny_th.png" ></a>
. . .
<a onclick="PlayIt('media1/Sintel.mp4')">
<img src="media1/Sintel_th.png" ></a>
But the link opens a new html page with the flashplayer and does not play the video
The SELECT Option value technique works
How can I adapt the code to create thumbnail links that do not open a new html page and will play the video based on the thumbnail chosen?
TIA
Code:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div>
<SPAN id=video1>
<object width="768" height="452" style="margin-left: 8px" >
</object>
</SPAN>
</div>
<div>
<SELECT id=vid onchange=PlayIt() size=1 name="vid" style="width: 768px; font-family: sans-serif; font-size: 1.2em; color:#C0C0C0; height:1.4em; background-color:#000000;">
<option value="">-- Please Select Video File --</option>
<option value=media1/BuckBunny.mp4>. . Big Buck Bunny </option>
<option value=media1/ElephantsDream.mp4>. . Elephants Dream </option>
<option value=media1/LadyWashington.mp4>. . Lady Washington </option>
<option value=media1/Sintel.mp4>. . Sintel </option>
<option value=media1/TearsofSteel.mp4>. . Tears of Steel </option>
</SELECT>
</div>
<script language="javascript" type="text/javascript">
function PlayIt(){
document.getElementById("video1").innerHTML='<object width="768" height="452" '
+'classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" '
+'type="application/x-shockwave-flash">'
+'<param name="movie" value="player50.swf">'
+'<param name="allowfullscreen" value="true" />'
+'<param name="flashvars" value="file='+document.getElementById('vid').value
+'&backcolor=000000&frontcolor=ffffff&autostart=true" />'
+'<embed type="application/x-shockwave-flash" width="768" height="452" src="player50.swf" allowfullscreen="true" flashvars="file='+document.getElementById('vid').value+'&autostart=true&backcolor=000000&frontcolor=ffffff" >'
+'</embed>'
+'</object>'
}
</script>
</body>
<html>
Re: Adapt flashplayer video playlist to use thumbnails
Have you tried putting
HTML Code:
target="_self"
so it redirects the browser to open the file in the current window?
Re: Adapt flashplayer video playlist to use thumbnails
@Nightwalker83
Thanks ... I forgot about that - now it stays in the current window - but still no playback
Looks like the "movie" is not getting loaded
when I click on the thumbnail Firefox indicates that player50.swf is activated but the actual movie isn't getting loaded
