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
glagrewAsked:
Who is Participating?
 
COBOLdinosaurConnect With a Mentor 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&
0
 
COBOLdinosaurCommented:
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&
0
 
glagrewAuthor 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.
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
COBOLdinosaurCommented:
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&
0
 
glagrewAuthor Commented:
ok, snapping it in. be right back
0
 
glagrewAuthor Commented:
Yes, it shows up in the page and plays when you push play.
0
 
glagrewAuthor Commented:
sorry it took me so long to respond. I wont walk away again, unless you say it will be a bit.
0
 
COBOLdinosaurCommented:
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&
0
 
glagrewAuthor Commented:
ok, be right back.

oh...its 10:08pm here
0
 
COBOLdinosaurCommented:
Okay Pacific.So it is still early.

Cd&
0
 
glagrewAuthor Commented:
ok, the video and the thumb are sitting vertical on top of one another and when i click the thumb it fires. LOL
0
 
glagrewAuthor Commented:
is that what is supposed to be happening?
0
 
COBOLdinosaurCommented:
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&

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



Cd&

0
 
glagrewAuthor Commented:
I am getting ready to push this to the web if you want to look at the last issue i have.
0
 
COBOLdinosaurCommented:
Okay what do you need.

Cd&
0
 
glagrewAuthor 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
0
 
glagrewAuthor Commented:
Good morning by the way :-)
0
 
COBOLdinosaurCommented:
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&
0
 
glagrewAuthor Commented:
? Im sorry u havr lost me just slightly
0
 
COBOLdinosaurCommented:
Okay, what don't you understand?

Cd&
0
 
glagrewAuthor Commented:
What do i need to change to make it capable for two thumbnails and two videos?
0
 
COBOLdinosaurCommented:
Let me dig through the DOM to see how the video load methods work.


Cd&
0
 
glagrewAuthor Commented:
Ok. Ill b close.
0
 
glagrewAuthor Commented:
Oh ya...by the way...YOU are awesome!!!! Thank you so much for your help.
0
 
glagrewAuthor Commented:
Oh ok...also...my comment was posted while looking at the site in firefox.
0
 
COBOLdinosaurCommented:
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&
0
 
glagrewAuthor 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?
0
 
COBOLdinosaurCommented:
No problem.

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


Cd&
0
 
glagrewAuthor Commented:
ok. Im am off work. sorry to have taken so much time away. Are you available?
0
 
COBOLdinosaurCommented:
For a little while.

Cd&
0
 
glagrewAuthor 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.
0
 
COBOLdinosaurCommented:
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.
0
 
glagrewAuthor 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!
0
 
glagrewAuthor 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?
0
 
glagrewAuthor 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?
0
 
COBOLdinosaurCommented:
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&
0
 
COBOLdinosaurCommented:
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&
0
 
glagrewAuthor 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.
0
 
glagrewAuthor Commented:
be right back.
0
 
glagrewAuthor 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.
0
 
glagrewAuthor Commented:
will come back tomorrow mid day. Gnight.
0
 
COBOLdinosaurCommented:
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&

0
 
glagrewAuthor Commented:
Hi there Genius :-)
0
 
COBOLdinosaurCommented:
While I see you have both of them on the page.  but not preloading.


Cd&
0
 
glagrewAuthor Commented:
Yes.
0
 
glagrewAuthor Commented:
It is different in ie than in firefox too...do you see that? Seems to work better in ie..im surprised.
0
 
glagrewAuthor 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 :-)
0
 
COBOLdinosaurCommented:
Why not?  Did you get an error message?

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


Cd&
0
 
glagrewAuthor 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!
0
 
glagrewAuthor 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?
0
 
glagrewAuthor 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.
0
 
COBOLdinosaurCommented:
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&

0
 
glagrewAuthor 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!
0
 
glagrewAuthor 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 :-)
0
 
COBOLdinosaurCommented:
Good night, and I hope you do well with your videos. :^)


Cd&
0
 
glagrewAuthor Commented:
me too :-) Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.