Embedded multi player (video)

Printable View

Show 40 post(s) from this thread on one page

07-12-2011, 06:47 PM
igotregistered

Embedded multi player (video)

Not sure if this is actually what it's called.

I'm also not sure if it's flash. Basically I'd like one video player which can play a youtube playlist, or list I code to play in it.

It's here on this site www - dot - tsn.ca

It's a sports site which has a single video player on the right hand side play news stories the guests click on. You never leave the page though, no matter what news story is clicked.

Is there something like that, here? Closest I've found is the content glider, but that's for graphics.

Thank you
07-12-2011, 07:37 PM
Beverleyh

There's a download in this thread that might help: http://www.dynamicdrive.com/forums/s...ad.php?t=47803
07-12-2011, 10:30 PM
igotregistered

Hi BeverlyH, thank you for responding.

I'm going to give this a shot after the gym. And see how it goes. I'll update either later on this evening or tomorrow.

Thank you
07-13-2011, 12:04 PM
igotregistered

Quote:

Originally Posted by Beverleyh

There's a download in this thread that might help: http://www.dynamicdrive.com/forums/s...ad.php?t=47803

Unfortunately, this isn't what I'm looking for. Though your page ultimately is how I'd like my video player to be setup, (with the ability to play all videos on the page in one player).

My goal is to have my player play streaming video....a.k.a [youtube]

I don't host any video because the video I play is copyrighted material. If I host it on my server I can be prosecuted.
07-13-2011, 12:12 PM
Beverleyh

The latest version of JW Player can stream youtube videos - never tried it myself though: http://www.longtailvideo.com/players/jw-flv-player/
07-13-2011, 12:32 PM
molendijk

If you're looking for something like THIS (raw version), I can make something for you.
(HERE's a sophisticated example of the technique)
===
Arie Molendijk
07-13-2011, 01:42 PM
igotregistered

Hi Molendijk, thank you for reply.

Well....yes and no. Ultimately I'd like for my player to be 352x240 size with 4-5 video links below it. If a guest clicks any link. Each one will play in the same player.

All of the links would be hotlinked youtube videos. It doesn't need to be very extravagant either.

Is that possible?

Thank you
07-13-2011, 02:38 PM
molendijk

That's possible. I'll come back to you in a couple of hours (have to leave now).
===
Arie.
07-13-2011, 02:48 PM
igotregistered

Quote:

Originally Posted by molendijk

That's possible. I'll come back to you in a couple of hours (have to leave now).
===
Arie.

Excellent, I appreciate your help. I'll look for you later. Have a nice day.
07-13-2011, 08:13 PM
molendijk

You can try something like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> body {font-family: verdana; font-size:12px} #video_container, #hider1, #hider2 {position:absolute; left:50%; top:50%; margin-top:-170px; margin-left:-176px; width: 352px; height:240px; overflow:hidden} #hider1, #hider2{background:black;color:white; display:none;} </style> <script type="text/javascript"> function include_video_prep(url) { video='<object id="the_video" type="application/x-shockwave-flash" style="position:absolute;width:100%;height:100%;" data='+'"'+url+'"'+'><param name="movie" value='+'"'+url+'"'+'><param name="allowFullScreen" value="true"><param name="flashvars" value="autoplay=1"><param name="wmode" value="window"><param name="allowNetworking" value="all" ><param name="allowscriptaccess" value="always"><\/object>' setTimeout("document.getElementById('video_container').innerHTML=video",0); } function include_video(which) { document.getElementById('hider1').style.display='block'; document.getElementById('hider2').style.display='block'; include_video_prep(which); setTimeout("document.getElementById('hider1').style.display='none'; document.getElementById('hider2').style.display='none'",500); } </script> </head> <body ><div> <div id="video_container"></div> <div id="hider1"> <iframe style="position:absolute;width:100%;height:100%;" src="http://www.youtube.com/apiplayer" frameborder="0"></iframe> </div> <div id="hider2" ></div> <div style="position:absolute; top:50%; left:50%; margin-top:90px; margin-left: -225px"> Click on a link -> <a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/1CZpRG4oMms?version=3&rel=0&autoplay=1&showinfo=0&start=0&autohide=0')">Fiddler</a>   <a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/g32oijfkhH4?version=3&rel=0&autoplay=1&showinfo=0&start=0&autohide=0')">Errol</a>   <a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/jUvcyyU7UB4?version=3&rel=0&autoplay=1&showinfo=0&start=0&autohide=0')">Arkansas</a>   <a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/vt4X7zFfv4k?version=3&rel=0&autoplay=1&showinfo=0&start=0&autohide=0')">Soccer</a>   <a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/Wz1W_omigwg?version=3&rel=0&autoplay=1&showinfo=0&start=0&autohide=0')">Spooky</a>   <a href="javascript: void(0)" onclick="document.getElementById('video_container').innerHTML=''">Hide</a> </div> </div></body> </html>

The styles are just examples. I made it so that there's no flicker on video-transition.
The links have the following form:
onclick="include_video('http://www.youtube.com/v/1CZpRG4oMms?version=3&rel=0&autoplay=1&showinfo=0&start=0&autohide=0')"
where the red part is the ID of a YouTube video.

I hope this helps.
===
Arie.

Show 40 post(s) from this thread on one page