Jump to content

Next Video Within The <td></td> Tag.

amitamberker

By amitamberker
in HTML/XHTML

Recommended Posts

amitamberker Invested Member

amitamberker

Posted
Posted

hi!1. i would like to retain the contents from second <td></td> tag.2. upon clicking the "Next Video" link, the "Video Code_01" should change to "Video Code_02" so that visitors could watch the 2nd video, 3rd video and so on within the same html page.

<html><head><title>Testing</title></head><body><table style="width: 700px" cellspacing="0" cellpadding="0" align="center"> <tr> <td width="350">Blah... Blah... Blah... Blah... Blah...</td> <td width="350">Video Code_01<br /> <br /> <a href="#"> Next Video</a><br /> <br /> Blah... Blah... Blah... Blah... Blah...</td> </tr></table></body></html>
Link to comment
Share on other sites
amitamberker Invested Member

amitamberker

Posted
  • Author
Posted

could someone help please?

Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted

I am pretty new to javascript, but I reckon this is a good time to use it. Something like this:

<html><head><title>Testing</title><script type="text/javascript">var initVidvar initVid2function nextVid() {initVid=parseInt(document.getElementById("currVid").value)initVid++document.getElementById("currVid").value=initViddocument.getElementById("currVid").innerHTML="<a href='linkforthevideo'"+initVid+">Video Code_0"+initVid+"</a>"}</script></head><body><table style="width: 700px" cellspacing="0" cellpadding="0" align="center"><tr><td width="350">Blah... Blah... Blah... Blah... Blah...</td><td width="350"><span id="currVid" value="1"><a href="">Video Code_01</a></span><br /><br /><span onclick="nextVid()">Next Video</span><br /><br />Blah... Blah... Blah... Blah... Blah...</td></tr></table></body></html>

I have tested it, and it only works in IE, for some reason. I have no idea why, given that I'm using pretty basic code. For anyone who might be able to help: I tried with an if (document.getElementById().value) clause that generated an alert if the if statement was false, and it popped up on Chrome, Firefox, Safari. Which is really weird, because I've used that path quite a lot of times practicing and I usually test first on FF. What's up with that?Creative: give me a couple hours, I'll go back to the textbook and see no reason why I shouldn't have it working for later. I adopted the assumption that you would want the video name to become a link, but if you don't, you can easily adjust that code so that it changes the source of the video, causing it to play in the first table cell.

Link to comment
Share on other sites
amitamberker Invested Member

amitamberker

Posted
  • Author
Posted
Could you please explain more because your code doesn't really help...I don't see where the video is.
<table style="width: 700px" cellspacing="0" cellpadding="0" align="center"><tr><td width="350">Blah... Blah... Blah... Blah... Blah...</td><td width="350">the first video is here<br /><br /><a href="#">Next Video</a><br /><br />Blah... Blah... Blah... Blah... Blah...</td></tr></table>
Link to comment
Share on other sites
amitamberker Invested Member

amitamberker

Posted
  • Author
Posted
I think he wants to add a "Next Video" button in the table.
yup! you gotch me.
Link to comment
Share on other sites
amitamberker Invested Member

amitamberker

Posted
  • Author
Posted

okay chibineku. meanwhile i will try and let you know.

I have tested it, and it only works in IE, for some reason. I have no idea why, given that I'm using pretty basic code. For anyone who might be able to help: I tried with an if (document.getElementById().value) clause that generated an alert if the if statement was false, and it popped up on Chrome, Firefox, Safari. Which is really weird, because I've used that path quite a lot of times practicing and I usually test first on FF. What's up with that?Creative: give me a couple hours, I'll go back to the textbook and see no reason why I shouldn't have it working for later. I adopted the assumption that you would want the video name to become a link, but if you don't, you can easily adjust that code so that it changes the source of the video, causing it to play in the first table cell.
Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted

This works, and it's about half the size:

<html><head><title>Testing</title><script type="text/javascript">var nextVid=1function advanceVid() {nextVid++document.getElementById("videoLink").innerHTML="<a href=''"+nextVid+">Video Code_0"+nextVid+"</a>"}</script></head><body><table style="width: 700px" cellspacing="0" cellpadding="0" align="center"><tr><td width="350">Blah... Blah... Blah... Blah... Blah...</td><td width="350"><span id="videoLink" value="1"><a href="">Video Code_01</a></span><br /><br /><span onclick="advanceVid()" >Next Video</span><br /><br />Blah... Blah... Blah... Blah... Blah...</td></tr></table></body></html>

Notes: Repeated clicking works like any other text, i.e. results in selections of various amounts of text. Fixes: change the "Next Video" bit from <span>/<span> to:

<a href="java script:advanceVid()">Next Video</a>

On reflection, that's neater all round, and you can style it so that the link doesn't show up blue and underlined and stuff.

Link to comment
Share on other sites
amitamberker Invested Member

amitamberker

Posted
  • Author
Posted

chibineku, where should i incorporate the 2nd video code in the following? and please see my questions in bold and CAPS.

<html><head><title>Testing</title><script type="text/javascript">var nextVid=1function advanceVid() {nextVid++document.getElementById("videoLink").innerHTML="<a href='WHAT SHOULD I INCORPORATE HERE?'"+nextVid+">Video Code_0"+nextVid+"</a>"}</script></head><body><table style="width: 700px" cellspacing="0" cellpadding="0" align="center"> <tr> <td width="350" valign="top">Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...</td> <td width="350"><span id="videoLink" value="1"><a href="WHAT SHOULD I INCORPORATE HERE?"><object width="320" height="265"><param name="movie" value="
name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object><noembed>test</noembed></a></span><br /> <br /> <a href="java script:advanceVid()">Next Video</a><br /> <br /> Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...</td> </tr></table></body></html>
Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted
chibineku, where should i incorporate the 2nd video code in the following? and please see my questions in bold and CAPS.
Ideally what you want is all your videos to be named something like videoclip_01, videoclip_02, etc., and to be stored in a folder called, say, videos. If you want the video to play in the cell, im not sure on the formatting for that, but if you just want a link to where the video is stored, or a page that calls the video which has the same name as the video clip, then it'd look like this:
<html><head><title>Testing</title><script type="text/javascript">var nextVid=1function advanceVid() {nextVid++document.getElementById("videoLink").innerHTML="<a href='VIDEOS/VIDEOCLIP_0'"+nextVid+">Video Code_0"+nextVid+"</a>"}</script></head><body><table style="width: 700px" cellspacing="0" cellpadding="0" align="center"><tr><td width="350" valign="top">Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...</td><td width="350"><span id="videoLink" value="1"><a href="WHATEVER THE ADDRESS OF THE FIRST VIDEO IS, I.E. VIDEOS/VIDEOCLIP_01"><object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/4G6U4pNHeaM&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/4G6U4pNHeaM&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object><noembed>test</noembed></a></span><br /><br /><input type="button" onclick="advanceVid()" value="Next Video" /><br /><br />Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...</td></tr></table></body></html>

You don't have to worry about the video code_02 part, because each click of the next video button (which, by the way, could easily be made into a button, as shown above) increments the video code by one.. If you want a static list for the videos, that's a whole different thing. This only works as a next button.

Link to comment
Share on other sites
amitamberker Invested Member

amitamberker

Posted
  • Author
Posted
Ideally what you want is all your videos to be named something like videoclip_01, videoclip_02, etc., and to be stored in a folder called, say, videos
nope. wrong... the video itself should display.
if you just want a link to where the video is stored,
i do not wish to store the video files.
increments the video code by one..
i don't want increments as "Video Code_02" - "Video Code_03" and etc... instead, i would like to show the video clipping. let me explain again:1. upon hitting "Next Video", the existing video clip should disappear and the next video clip should appear.2. perhaps, instead of "Next Video", it could be as "1 | 2"3. "1" would be for existing video and "2" for the following:
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/watch?v=mzr7PWSrZ3A&hl=en&fs=1"></param><param'>http://www.youtube.com/watch?v=mzr7PWSrZ3A&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/watch?v=mzr7PWSrZ3A&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted

Ah, I see. Well, if the videos aren't stored with sequential file names, then you'll need to create an array with the URLs and you can use the script function to cycle through the array. At least, that's the only way my limited experience could manage. Do you know the URLs of all the videos you want to show? I only put the link information in because I didn't know how you wanted the videos to be displayed and I've never written the HTML for displaying videos, so I don't know the syntax.

Link to comment
Share on other sites
amitamberker Invested Member

amitamberker

Posted
  • Author
Posted
Ah, I see.
yup! you gotch me...
Well, if the videos aren't stored with sequential file names, then you'll need to create an array with the URLs and you can use the script function to cycle through the array.
how can i do it? could you please show me once?
At least, that's the only way my limited experience could manage.
but you are much better than me. i suppose you are great!
Do you know the URLs of all the videos you want to show?
yup! i know.* http://www.youtube.com/watch?v=mzr7PWSrZ3A*
* http://www.youtube.com/watch?v=pxzcTTpPSs0but can i use a embed codes instead of urls? i mean:~~~~~~~~~~~<object width="320" height="265"><param name="movie" value="
name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>~~~~~~~~~~~
I only put the link information in because I didn't know how you wanted the videos to be displayed and I've never written the HTML for displaying videos, so I don't know the syntax.
it's there in my version of html code. you could see how the video is displaying in my version of html. scroll-up and check that...
Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted

I need help with this one. I have written a script that replaces the src of the embed tag with the next/previous one from those in the array of videos when the next/last buttons are pressed, and added a couple of test spans that first of all checks that the new src has been pulled from the array, and second checks that the src of the embed tag has changed. These show that the script is doing what it's supposed to. However, the video itself doesn't change. I don't know if embeds don't refresh automatically or something. I don't see why they wouldn't, as most page elements that change reflow. Anyone? Here is the current HTML and script:

<html><head><title>Testing</title><script type="text/javascript">var vidArr=new Array()vidArr[0]="http://www.youtube.com/v/4G6U4pNHeaM&hl=en&fs=1"vidArr[1]="http://www.youtube.com/watch\?v\=mzr7PWSrZ3A"vidArr[2]="http://www.youtube.com/watch\?v\=vzXkmxxPf04"vidArr[3]="http://www.youtube.com/watch\?v\=pxzcTTpPSs0"var nextVid=0function advanceVid() {nextVid++nextvid=parseInt(nextVid)document.getElementById("test").innerHTML=vidArr[nextVid]document.getElementById("testSrc").innerHTML=document.getElementById("display").srcdocument.getElementById("display").src=vidArr[nextVid]}function reverseVid() {nextVid--nextvid=parseInt(nextVid)document.getElementById("test").innerHTML=vidArr[nextVid]document.getElementById("testSrc").innerHTML=document.getElementById("display").srcdocument.getElementById("display").src=vidArr[nextVid]}</script></head><body><table style="width: 700px" cellspacing="0" cellpadding="0" align="center"><tr><td width="350" valign="top">Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...</td><td width="350"><object width="320" height="265"><param value="http://www.youtube.com/v/4G6U4pNHeaM&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed id="display" src="http://www.youtube.com/v/4G6U4pNHeaM&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object><br /><br /><input type="button" onclick="advanceVid()" value="Next Video" /><input type="button" onclick="reverseVid()" value="Last Video" /><br /><br />Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...</td></tr></table><span id="test"></span><br /><span id="testSrc"></span></body></html>

Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted

Okay, this is a little better (messed up your formatting, but that can be sorted):

<html><head><title>Testing</title><script type="text/javascript">var vidArr=new Array()vidArr[0]="http://www.youtube.com/v/4G6U4pNHeaM&hl=en&fs=1"vidArr[1]="http://www.youtube.com/watch\?v\=mzr7PWSrZ3A"vidArr[2]="http://www.youtube.com/watch\?v\=vzXkmxxPf04"vidArr[3]="http://www.youtube.com/watch\?v\=pxzcTTpPSs0"var nextVid=0function advanceVid() {nextVid++nextvid=parseInt(nextVid)document.getElementById("test").innerHTML=vidArr[nextVid]document.getElementById("testSrc").innerHTML=document.getElementById("display").firstChild.srcdocument.getElementById("display").innerHTML="<embed src="+vidArr[nextVid]+" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"320\" height=\"265\" />"}function reverseVid() {nextVid--nextvid=parseInt(nextVid)document.getElementById("test").innerHTML=vidArr[nextVid]document.getElementById("testSrc").innerHTML=document.getElementById("display").firstChild.srcdocument.getElementById("display").innerHTML="<embed src="+vidArr[nextVid]+" type='application\/x\-shockwave\-flash' allowscriptaccess='always' allowfullscreen='true' width='320' height='265' \/>"}</script></head><body><table style="width: 700px" cellspacing="0" cellpadding="0" align="center"><tr><td width="350" valign="top">Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...</td><td width="350" id="display"><embed src="http://www.youtube.com/v/4G6U4pNHeaM&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265" /><br /><br />Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...</td></tr></table><br /><br /><input type="button" onclick="advanceVid()" value="Next Video" /><input type="button" onclick="reverseVid()" value="Last Video" /><span id="test"></span><br /><span id="testSrc"></span></body></html>

There aren't any errors anymore, at least, but it clears the default video and doesn't replace it with a second. I'm not sure why. I'll try to attract some more experienced eyes to this post...

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

The big problem is here:innerHTML="<embed src="+vidArr[nextVid]+" type=\"application/x-shockwave-flash\"Notice how you used inner quotes for the type, but forgot them for the src.On the other hand, why aren't you simply changing the src property of this object instead of rewriting the innerHTML? Have you tried it and it doesn't work?Does this work, BTW:document.getElementById("testSrc").innerHTML=document.getElementById("display").firstChild.srcI should think it would not, in compliant browsers anyway, because when the page first renders, the first child of "display" is NOT the <embed> element but a text node. (It holds a return character.)Would life be easier if you gave the <embed> element an id?

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

The actual problem is the URL you're using to embed the video:vidArr[0]="http://www.youtube.com/v/4G6U4pNHeaM&hl=en&fs=1"vidArr[1]="http://www.youtube.com/watch\?v\=mzr7PWSrZ3A"vidArr[2]="http://www.youtube.com/watch\?v\=vzXkmxxPf04"vidArr[3]="http://www.youtube.com/watch\?v\=pxzcTTpPSs0"A URL ending in "/watch ..." is the URL to the youtube page. The URL to be embedded has to be "/v/ ..."

Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted

Thanks to you both for looking and for your suggestions. I'll try them all.The innerHTML.src thing does work, in Firefox, Chrome and IE. Perhaps because I've been testing without a doctype, since you say it shouldn't work normally. Thanks again...I'll let you know how I get on :)

Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted

Ingolme, once again, I could kiss you. Deirdre's Dad: I tried giving the embed an id, but it didn't work. Of course, at that point, none of it worked. It would be a more elegant solution, and I'll adjust it if Creative decides to keep this solution and wants any further additions, like alerts when the array runs out. In the meantime, I've spent long enough on this.Creative, here, at last, is a working script:

<html><head><title>Testing</title><script type="text/javascript">var vidArr=new Array()[b]vidArr[0]="http://www.youtube.com/v/4G6U4pNHeaM&hl=en&fs=1"vidArr[1]="http://www.youtube.com/v/mzr7PWSrZ3A"vidArr[2]="http://www.youtube.com/v/vzXkmxxPf04"vidArr[3]="http://www.youtube.com/v/pxzcTTpPSs0"[/b]var nextVid=0function advanceVid() {nextVid++nextvid=parseInt(nextVid)document.getElementById("test").innerHTML=vidArr[nextVid]document.getElementById("testSrc").innerHTML=document.getElementById("display").firstChild.srcdocument.getElementById("display").innerHTML="<embed src="+vidArr[nextVid]+" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"320\" height=\"265\" />"}function reverseVid() {nextVid--nextvid=parseInt(nextVid)document.getElementById("test").innerHTML=vidArr[nextVid]document.getElementById("testSrc").innerHTML=document.getElementById("display").firstChild.srcdocument.getElementById("display").innerHTML="<embed src="+vidArr[nextVid]+" type='application\/x\-shockwave\-flash' allowscriptaccess='always' allowfullscreen='true' width='320' height='265' \/>"}</script></head><body><table style="width: 700px" cellspacing="0" cellpadding="0" align="center"><tr><td width="350" valign="top">Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...</td><td width="350" id="display"><embed src="http://www.youtube.com/v/4G6U4pNHeaM&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265" /><br /><br />Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...</td></tr></table><br /><br /><input type="button" onclick="advanceVid()" value="Next Video" /><input type="button" onclick="reverseVid()" value="Last Video" /><span id="test"></span><br /><span id="testSrc"></span></body></html>

Notes: once the array runs out, the cell collapses becauase there's no content keeping it open. It would be easy to either loop round to the beginning again or to add an alert that tells the user there aren't any more videos or whatever. In the interim, I hope this is what you were looking for. To add more items to the array, just follow the syntax in the top part (bold).

Link to comment
Share on other sites
  • 2 weeks later...
amitamberker Invested Member

amitamberker

Posted
  • Author
Posted

chibineku, still the script is not working in my web browser. nothing is happening upon hitting "Next Video" and "Last Video" yet... do i need to upload in a server? shall we meet on google talk?

Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted

Hiya. I'm really surprised it doesn't work...it works perfectly for me, even just testing it locally. I don't have Google Talk - have not in fact heard of it until this moment. I've uploaded the file and tested it and it works in IE and FF at least. Here's a link:VideoNavAre you changing any of it when you try it out or copying it verbatim?

Link to comment
Share on other sites
amitamberker Invested Member

amitamberker

Posted
  • Author
Posted
Hiya. I'm really surprised it doesn't work...it works perfectly for me, even just testing it locally. I don't have Google Talk - have not in fact heard of it until this moment. I've uploaded the file and tested it and it works in IE and FF at least. Here's a link:VideoNavAre you changing any of it when you try it out or copying it verbatim?
Hey Chibineku, perhaps I did some typo. Just now saw your link VideoNav but guess what? Upon hitting the Next or Last Video button, the contents under video are disappearing and something is displaying near or around the buttons. Google Talk is a Chat program. In this we could meet Live and talk to each other. To access Google Talk, you need to a Gmail ID.Nope. I did not change anything. It was verbatim. Can you send me your E-mail ID?
Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted

I don't have GMail, but you can PM me or e-mail me at chibineku@aol.com.The text that appears is a test for my own purposes, to see that the script is cycling through the array correctly. I am assuming that you have scripts enabled in your browser, right? :) I am aware that the blah blah blah bit disappears, which is because the script changes the innerHTML of a portion of the page and I didn't bother adding that again, but it definately definately works, heh. Are you hitting the 'Last' button for the next video instead of the 'Next' video button maybe? Very weird, it is.

Link to comment
Share on other sites
amitamberker Invested Member

amitamberker

Posted
  • Author
Posted
I don't have GMail, but you can PM me or e-mail me at chibineku@aol.com.
You can get register from SignUp for Gmail Account. Will send you an email shortly since I wanted to show you the attachment file. I guess, I cannot attached any files on Forum OR PM and hence requested for your email.
The text that appears is a test for my own purposes, to see that the script is cycling through the array correctly. I am assuming that you have scripts enabled in your browser, right? :)
YUP! It's enabled in my IE browser.
I am aware that the blah blah blah bit disappears, which is because the script changes the innerHTML of a portion of the page and I didn't bother adding that again,
Oh! I see. Then you could please bother and fix it up? Since I do not want the blah blah blah bit to disappear.
but it definately definately works, heh. Are you hitting the 'Last' button for the next video instead of the 'Next' video button maybe? Very weird, it is.
Yeah! Indeed and Definately it works but we need to fix few more thingys. I am hitting both the buttons and it does navigates. Hence, no worries about navigation. Will send you an email shortly along with attachment file.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...