We help IT Professionals succeed at work.

video streaming inside lightbox

I would like the code below to stream in a lightbox after a user clicks a thumbnail on the home page of the site I am working on....

Can you please make this work?
<video id=0 controls width=640 height=360>
<noscript><a href=http://www.freemake.com/free_video_converter/>video converter</a></noscript>
<source src="RValdez_CameraLighting111611.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="RValdez_CameraLighting111611.webm" type='video/webm' >
<source src="RValdez_CameraLighting111611.mp4" type='video/mp4'>

<p>Video is not visible, most likely your browser does not support HTML5 video</p>

Open in new window

CameraStilla.png
Comment
Watch Question

Top Expert 2013

Commented:
As I said in your other Question I'll take a look.  The fact that it has been here all day without a response is probably an indication that there is no easy answer, and because HTML5 is still only a proposed standard there is very little documentation for proposed new features like video that may or may not survive the final draft.

I will do a little research and see if I can come up with something.  You have it cross posted in multimedia, so an Expert there may come up with something.


Cd&

Author

Commented:
Yes I have it cross posted. and.....if the html5 is the issue, I am not personally using html5 in this coding. It is just simply html. The mention of it in the code is simply a message to the end user.

thank you so much for taking a look.
Top Expert 2013

Commented:
Okay we need to move through this a step at a time. There is no ending for some of your tags and no control and I don't like the id.  So let's start with this code and see if it brings up the video and lets you play it.  The scripting to fire from the thumb is nothing, but first we have to get it to play.

<video id="vid" controls="controls" width=640 height=360>
<noscript><a href=http://www.freemake.com/free_video_converter/>video converter</a></noscript>
<source src="RValdez_CameraLighting111611.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="RValdez_CameraLighting111611.webm" type='video/webm' />
<source src="RValdez_CameraLighting111611.mp4" type='video/mp4' />

<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>

Open in new window

Put that in the page and let's see what happens.


Cd&

Author

Commented:
ok, snapping it in. be right back

Author

Commented:
Yes, it shows up in the page and plays when you push play.

Author

Commented:
sorry it took me so long to respond. I wont walk away again, unless you say it will be a bit.
Top Expert 2013

Commented:
Home free!

Now the thumb which I assume is a straight img tag so we need to get it to fire an event.

<img src="somethumb.png" onclick="fireVideo()" />

Open in new window


that will add the event to the thumb so now the script goes in the head of the page:
<script type="text/javascript">
function fireVideo()
{
document.getElementById('vid').play();
}
</script>

Open in new window


okay now when it loads; and make sure you wait until it is finished loading click on the thumb and see if it fires.

If it does and you want to remove the controls remove controls="controls" and then test again to make sure it still fires.

What time zone are you in? Is it late or early for you?


Cd&

Author

Commented:
ok, be right back.

oh...its 10:08pm here
Top Expert 2013

Commented:
Okay Pacific.So it is still early.

Cd&

Author

Commented:
ok, the video and the thumb are sitting vertical on top of one another and when i click the thumb it fires. LOL

Author

Commented:
is that what is supposed to be happening?
Top Expert 2013

Commented:
I don't know about the layout I haven't seen the code or the page.  As long as the video starts on the click of the thumb anything else is just cosmetics.


Cd&

Top Expert 2013

Commented:
I'm going offline for the night, I'll look in tomorrow in case you have any other problems with it.



Cd&

Author

Commented:
I am getting ready to push this to the web if you want to look at the last issue i have.
Top Expert 2013

Commented:
Okay what do you need.

Cd&

Author

Commented:
Ok...i tried to duplucate the code for a second clip and it just shows control bar...u can see it on zedlaver.com

Author

Commented:
Good morning by the way :-)
Top Expert 2013

Commented:
It is not going to work that way.  

The video has not been loaded so all the click does is try to get the video as a page, and the function fires to play a video that has not been loaded

The click returns a 404 not found error on the mp3 so there is a problem with the URL

The function as written is not going to work for multiple video as it is because ther is nothing in the function to point at a given file.  It just fire the video which should already have a file loaded into it

You are going in a completely different direction.


Cd&

Author

Commented:
? Im sorry u havr lost me just slightly
Top Expert 2013

Commented:
Okay, what don't you understand?

Cd&

Author

Commented:
What do i need to change to make it capable for two thumbnails and two videos?
Top Expert 2013

Commented:
Let me dig through the DOM to see how the video load methods work.


Cd&

Author

Commented:
Ok. Ill b close.

Author

Commented:
Oh ya...by the way...YOU are awesome!!!! Thank you so much for your help.

Author

Commented:
Oh ok...also...my comment was posted while looking at the site in firefox.
Top Expert 2013

Commented:
Firefox is my primary browser... 90% of the time.  I use Chrome occassionally when I am doing research that involves a lot of searching because Chrome is optimized for that.  As for IE, I only have it around for testing purposes; it is quite worthless.

===========================


Okay here is what we need to try.  I think it will work.  

There are now two video tags so that the videos can be preloaded.  If we don't do a preload then when you
try to play you will get a big delay waiting for the load.

We don't use the function anymore we just fire directly off the click on the images.

<div>
<img src="somepic.png" onclick="document.getElementById('vid1').play()"; />
<video id="vid1" src="RValdez_CameraLighting111611.mp4" width=640 height=360 preload </video>
</div>

<div>
<img src="someotherpic.png" onclick="document.getElementById('vid2').play()"; />
<video id="vid2" src="RValdez_anotherVideo.mp4" width=640 height=360 preload </video>
</div>

Open in new window


You will have to put in the right values for the source of the images and the videos.


Cd&

Author

Commented:
Oh this looks wonderful. I am unable to plug it in yet. Is it ok if we leave question open fir a bit till i can get back to you?
Top Expert 2013

Commented:
No problem.

It would probably be a little difficult to test it from mobile.


Cd&

Author

Commented:
ok. Im am off work. sorry to have taken so much time away. Are you available?
Top Expert 2013

Commented:
For a little while.

Cd&

Author

Commented:
ok, the code above was a bust. sorry. dont know why. However, when I seperate the ltbox div into two ltbox and ltbox2 and give them thier own code ( the original you gave) they work....on my computer. dont seem to work anywhere else.

anyway I have been spending my every spare moment studying all about multimedia files today. I will put this code up the way it is right now so you can see it on line (zedlaver.com) and get source code to check it out if you want.
Top Expert 2013

Commented:
I get an error when I try to play.  Because I think you have the mp4 in a folder, and the url in the href is not qualified with a path so when I click I get a 404 not found error from the server which is looking for
zedlaver.com/RValdez_CameraLighting111611.mp4

So if you change the url to a fully qualified url we should be able to get it across the net.

Author

Commented:
I am so happy. I am moving the files over to the ftp now. I think you are absolutely right. thank you...cross your fingers!

Author

Commented:
OK, that was good. Almost there. So now, it shows a big Q for quicktime and just sits there because I think the file is taking a long time to load. Did not even have the patience to wait to see how long. Any suggestions?

Author

Commented:
I have this bit of code I was working with before...

<source src="RValdez_CameraLighting111611.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="RValdez_CameraLighting111611.webm" type='video/webm' >
<source src="RValdez_CameraLighting111611.mp4" type='video/mp4'>

Do you think I can insert this somehow and have it run more smoothly?
Top Expert 2013

Commented:
Yes like this:
<video id="vid" controls="controls" width=340 height=260>
<source src="RValdez_CameraLighting111611.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="RValdez_CameraLighting111611.webm" type='video/webm' />
<source src="RValdez_CameraLighting111611.mp4" type='video/mp4' />
</video>

Open in new window


You need to be careful with colsing tags you missed some.


Cd&
Top Expert 2013

Commented:
Whebn I tried the site this time it sort of worked .  Iwanted to download but it was looking for a player.  However no error this time.

Cd&

Author

Commented:
ok, changed it to mov too. I am going to wait for these last two file versions to go up and then test again. thanks for hangin in there and working on this process with me.

Author

Commented:
be right back.

Author

Commented:
OK, I tried it but it seems that either my computer is getting tired or there is something else to look at. I am going to sleep. will work on it again tomorrow.

Author

Commented:
will come back tomorrow mid day. Gnight.
Top Expert 2013

Commented:
Just as well, I'm having some problems with my connect I've had to re-boot the router 3 times in the last hour.

Cd&

Author

Commented:
Hi there Genius :-)
Top Expert 2013

Commented:
While I see you have both of them on the page.  but not preloading.


Cd&

Author

Commented:
Yes.

Author

Commented:
It is different in ie than in firefox too...do you see that? Seems to work better in ie..im surprised.

Author

Commented:
How has your day been? I tried to award you 500 points for each of the GREAT answers you sent...but alas the system would not let me :-)
Top Expert 2013

Commented:
Why not?  Did you get an error message?

Cd&
Top Expert 2013

Commented:
BTW, Nice video now that I final got it playing, looks like a lot of work went into it.


Cd&

Author

Commented:
Yes, thank you very much :-):-)

re: points....no not an error...it wanted to close our conversation after the first award of points. I wanted to give you more and keep discussing so I canceled. I hope you get something really cool for all the help you have provided....you ... are .....awesome!

Author

Commented:
So, I am wondering what your thoughts are on whats currently happening with the videos and how i can cause a consistant reaction accross all platforms.

Also, originally I wanted to stream and give a lightbox effect with greyed out background when video came up. Can we try to make that happen?

Author

Commented:
Shall I award points and then open that last comment as a new question so I can get you more points. You have worked so much with me I think you deserve it.
Top Expert 2013

Commented:
Closing does not prevent further posting, it just takes a question off of the active list.  I do get something awesome... satisfaction, plus I learn a little with each solution.  Fortunately I have a little time since I retired and being here keeps in the game.


Streaming is a technology that is way beyond me. I could barely manage this part because it is just barely a part of browser technology now that HTML5 broadens the definition, but with streaming I don't even know where to start.


Cd&

Author

Commented:
Kind of wish I had a way to get back to you, I really enjoyed working with you. I will go ahead and award the points...secretly 5000 instead of 500 that they allow :-) and Wish you a Very Merry Christmas.

Ill post the rest to another expert, pray for response, and hit the books again :-)

Thank youooooouuuu!
Top Expert 2013
Commented:
Any time you have a web related problem.  If you post a question.  I will likely see it.  I'm on the site everyday and I look at pretty much everything in CSS, HTML and the web topics.

There is an email address in my profile that I use for site related, business.  If you post a question and its not getting attention just email me with the topic and title and I will look at it.


Cd&

Author

Commented:
Thank you so much. You are great! I will definately keep this in mind. Hope you have a wonderful Holiday Season....tt you soon and gnight :-)
Top Expert 2013

Commented:
Good night, and I hope you do well with your videos. :^)


Cd&

Author

Commented:
me too :-) Thanks.