change video src

[mpar612]

Hello,

I need a script that will allow my users change the video they are viewing by clicking a link without refreshing the page. For example, when the user comes to a page they will be shown a default video with three links underneath it. When they click on the link the video will change, but the entire page will not refresh.

Any guidance would be greatly appreciated.

Thanks in advance!

[molendijk]

You could do this, using an iframe
<div style="position:absolute;left:20%;top:20%;height:60%;width:60%">
<iframe id="myvideo" src="http://www.youtube.com/watch_popup?v=vt4X7zFfv4k"
style="position:relative;height:100%;width:100%"></iframe>
<div style="text-align:center">
<a href="#null" onclick="document.getElementById('myvideo').src='http://www.youtube.com/watch_popup?v=vt4X7zFfv4k'">Soccer</a> |
<a href="#null" onclick="document.getElementById('myvideo').src='http://www.youtube.com/watch_popup?v=bT4WGQVmQf8'">Ciocarlia</a> |
<a href="#null" onclick="document.getElementById('myvideo').src='http://www.youtube.com/watch_popup?v=Wz1W_omigwg'">Ghost</a> |
<a href="#null" onclick="document.getElementById('myvideo').src='http://www.youtube.com/watch_popup?v=LRBIVRwvUeE'">Helpdesk</a>
</div>
</div>

Arie Molendijk.

[Beverleyh]

Iframes are probably the easiest method but depending on your needs, you could use JW's FLV Media Player: http://www.longtailvideo.com/players/jw-flv-player/ along with their Javascript API.

I have a working example of this setup with clickable links here: http://www.jemcon.org/videovault.php

I've also attached a stripped down version of the page, along with all the necessary files, for demonstration purposes. You'll need to have this package uploaded to your server to see it working (you'll probably have to replace the URLs of my video files with your own in the html file as I cant remember if my .htaccess file will block video hotlinking from other domains). Please refer to JW's own website for the latest downloads and all necessary documentation.

[molendijk]

Beverley, that's nice.
But with an iframe, we can directly show, for instance, a youtube movie, without having to download it first to our hard disk (and upload it to our personal site afterwards). That would also be possible with the chromeless youtube player. Would it be possible with the FLV player?

Arie Molendijk.

[Beverleyh]

Yes, you can stream videos uploaded to YouTube directly into the JW player, although I havent tried it myself.

With the download package from JW's official website there is a youtube plugin file called "yt.swf" that you just upload to the same location as the "player.swf" file. You can then reference the YouTube URLs in the html (or xml playlist, whichever you're using).

Hope that helps.

PS - you might also find this page useful: http://home5.inet.tele.dk/nyboe/flash/ as its a one-stop-shop to lots of FLV video player examples and other important documentation/tools.

[molendijk]

Thanks!
Arie.

[Beverleyh]

No problem Arie.

Something else which may prove useful: A small free tool to convert videos to a compatiable .mp4 format, ready for JW's FLV Player.
It needs free QuickTime 7 installed beforehand to function properly and also supports batch conversion.
http://www.videohelp.com/tools/3GP_Converter

Open the setup file and choose English from the dropdown menu, then choose your video format "Model".
The "MP4, for PSP" Model (3rd option from the bottom) works best with the FLV Player - play with the different quality presets within this Model to find one that best suits your needs.

You can also edit the "Transcoding.ini" file to set your own custom parameters such as framerate, video dimensions and bitrate and audio frequency, etc.

[Carox]

Thanks Beverleyh!

But does it work on all operating systems and cross browsers? Like Firefox on Linux, Firefox on Windows XP, IE on windows etc. If this is true, then its really great using it!!

-
Carox

[Beverleyh]

I have definitely used/tested it myself on XP, Vista and Windows7 all using IE6/7/8, FF, Safari, Chrome and Opera.
I don't have a MAC myself, but I know users who tested it for me on MAC in FF and Safari and its all peachy there too!

[igotregistered]

Hi Beverly, I got it all uploaded and see the player but after replacing your link to your .flv video with a youtube URL. The progress circles and circles without playing anything.

I should note. I want to do exactly what you have on your page, except I do not want to host the videos. I hotlink all of my videos back to youtube.

Thank you