SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Dec 1999
    Location
    Highlands Ranch, CO
    Posts
    193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help from a JavaScript Guru

    I have about 100 videos that I need to embed into an html page. I would like to have links on this HTML page and have them play in the same page:

    Play Video 1
    Play Video 2
    Play Video 3
    ... etc

    I cannot figure out how to pass the video names to the embed code.

    Here is the embed code: (See the bold 'VIDEO1')
    PHP Code:
      <OBJECT ID="media" 
    CLASSID="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"
    width="320" height="240">
            <
    param name="src" Value="http://play.rbn.com/?url=mysite/mysite/g2demand/soaring/[b]VIDEO1[/b].rm&proto=rtsp">
    <
    param name="console" VALUE="Clip1">
    <
    param name="controls" VALUE="ImageWindow">
    <
    param name="AutoStart" VALUE="TRUE">
    <
    embed controls="ImageWindow" 
    CONSOLE="Clip1" 
    TYPE="audio/x-pn-realaudio-plugin" 
    SRC="http://play.rbn.com/?url=mysite/mtsite/g2demand/soaring/[b]VIDEO1[/b].rm&proto=rtsp"
    width="320" height="240" 
    AUTOSTART="true" 
    maintainaspect="true">
    </
    EMBED></OBJECT
    What would be the best way to be able to click on a link, and have it play the corresponding video in the same page? THIS MUST BE JAVASCRIPT. I do not have an option on the scripting language.

    Thanks for your help!

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Uhh, maybe
    Code:
    <param id="video" name="src" value="http://play.rbn.com/?url=mysite/mysite/g2demand/soaring/VIDEO1.rm&proto=rtsp">
    
    fucntion changeVideo( i )
    {
        var videos = [
            'someVideoUri1.rm',
            'someVideoUri2.rm',
            'someVideoUri3.rm'];
        document.getElementById( 'video' ).setAttribute( "value", videos[i] );
    }
    
    <input type="button" value="Play Video 1" onclick="changeVideo(0);" />
    Not tested
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Zealot
    Join Date
    Dec 1999
    Location
    Highlands Ranch, CO
    Posts
    193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, not that this does not work - but I am an idiot when it comes to javascript. Maybe if I knew exactly what this was doing...

    Code:
    <input type="button" value="Play Video 1" onclick="changeVideo(0);" />
    Calls the changeVideo(0) function below, using the first value in the array

    Code:
    function changeVideo( i )
    {
        var videos = [
            'someVideoUri1.rm',
            'someVideoUri2.rm',
            'someVideoUri3.rm'];
        document.getElementById( 'video' ).setAttribute( "value", videos[i] );
    }
    By pressing the button, the script looks for an element with the id='video', and does it dynamically place the value of videos[0] into the value="" element of this code:

    Code:
    <param id="video" name="src" value="http://play.rbn.com/?url=mysite/mysite/g2demand/soaring/VIDEO1.rm&proto=rtsp">
    Thereby replacing the code that is currently there?

    If so, I don't think it is working. Also, I need 2 lines changed:

    Code:
    <OBJECT ID="media" 
    CLASSID="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"
    width="320" height="240">
    <param name="src" Value="http://play.rbn.com/?url=mysite/mysite/g2demand/soaring/VIDEO1.rm&proto=rtsp">
    <param name="console" VALUE="Clip1">
    <param name="controls" VALUE="ImageWindow">
    <param name="AutoStart" VALUE="TRUE">
    <embed controls="ImageWindow" 
    CONSOLE="Clip1" 
    TYPE="audio/x-pn-realaudio-plugin" 
    SRC="http://play.rbn.com/?url=mysite/mtsite/g2demand/soaring/VIDEO1.rm&proto=rtsp"
    width="320" height="240" 
    AUTOSTART="true" 
    maintainaspect="true">
    </EMBED></OBJECT>
    Is there something else I need to do?

    Thanks for the help!

  4. #4
    SitePoint Zealot
    Join Date
    Dec 1999
    Location
    Highlands Ranch, CO
    Posts
    193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, maybe I am going about this wrong.

    Lets say I wanted to click a link to play a video.

    I am on video.htm here is the code on that page:

    Code:
    <a href="video.htm?vidid=video1">Play Video 1</a><br>
    <a href="video.htm?vidid=video2">Play Video 2</a><br>
    <a href="video.htm?vidid=video3">Play Video 3</a><br>
    
    
    <OBJECT ID="media" 
    CLASSID="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"
    width="320" height="240">
    <param name="src" Value="http://play.rbn.com/?url=mysite/mysite/g2demand/soaring/vidid.rm&proto=rtsp">
    <param name="console" VALUE="Clip1">
    <param name="controls" VALUE="ImageWindow">
    <param name="AutoStart" VALUE="TRUE">
    <embed controls="ImageWindow" 
    CONSOLE="Clip1" 
    TYPE="audio/x-pn-realaudio-plugin" 
    SRC="http://play.rbn.com/?url=mysite/mtsite/g2demand/soaring/vidid.rm&proto=rtsp"
    width="320" height="240" 
    AUTOSTART="true" 
    maintainaspect="true">
    </EMBED></OBJECT>
    Now, when I click on 'Play Video 1' it effectively refreshes the page and plays the vidid that that was selected.

    Is this possible? If so, how can I do it? Keep in mind - I need it spelled out for me.

  5. #5
    SitePoint Zealot
    Join Date
    Dec 1999
    Location
    Highlands Ranch, CO
    Posts
    193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nevermind. I think this is impossible because javascript runs on the browser after the call to embed the video.

    But what do I know?

    Looks like I will have to make 100 individual pages.

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm. According MSDN the src attribute is read/write, so it seems that it could be changed. If so, this should work
    Code:
    <html>
    <head>
    <title>Labels</title>
    
    <script type="text/javascript">
    
    function GetVars( def )
    {
        this._def_ = def;
        var query, queries = top.location.search.substring(1).split( /\&/ );
        for ( var i=0; (query = queries[i]); i++ )
        {
            query = query.split( /\=/ );
            this[query[0]] = ( typeof query[1] == 'undefined' ) ? def : unescape(query[1]).replace( /\+/g, " " );
        }
    }
    
    GetVars.prototype.assign = function( key )
    {
        return ( this.exists( key ) ) ? this[key] : this._def_;
    }
    
    GetVars.prototype.exists = function( key )
    {
        return ( typeof this[key] != 'undefined' );
    }
    
    function setVideo()
    {
    	var defaultVideoId = 1; // Set this to a default ID
    	var g = new GetVars( defaultVideoId );
    	var vidURL = "http://play.rbn.com/?url=mysite/mysite/g2demand/soaring/vidid.rm&proto=rtsp".replace( "vidid", g.assign('vidid') );
    	document.getElementById( 'srcParam' ).setAttribute( "value", vidURL );
    	document.getElementById( 'movieEmbed' ).setAttribute( "src", vidURL );
    
    }
    
    </script>
    
    <body onload="setVideo()">
    
    <OBJECT ID="media"
    CLASSID="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"
    width="320" height="240">
    <param id="srcParam" name="src" Value="">
    <param name="console" VALUE="Clip1">
    <param name="controls" VALUE="ImageWindow">
    <param name="AutoStart" VALUE="TRUE">
    <embed id="movieEmbed" controls="ImageWindow"
    CONSOLE="Clip1"
    TYPE="audio/x-pn-realaudio-plugin"
    SRC="http://play.rbn.com/?url=mysite/mtsite/g2demand/soaring/vidid.rm&proto=rtsp"
    width="320" height="240"
    AUTOSTART="true"
    maintainaspect="true">
    </EMBED></OBJECT>
    
    
    </body>
    
    </html>
    Otherwise, you'd have to use document.write to insert the entire block of movie code.

    No PHP or anything like that available? suckage...
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    SitePoint Zealot
    Join Date
    Dec 1999
    Location
    Highlands Ranch, CO
    Posts
    193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hrm, now with the way it is responding, it looks like it 'COULD' work!

    I am however getting an error:

    document.getElementById( 'movieEmbed' ).setAttribute( "src", vidURL );

    is 'null' or not an object

    Beetle, I think you are close! Thanks for your help

    ----Definitely 'NO' PHP or ASP available. I originally wrote some pretty complex movie players for the 'thousands of videos' that my company posts. Now our hosting company has moved us to UNIX and they refuse to allow PHP or ASP. I am allowed to use JavaScript. They feel that PHP and ASP will open us up to hackers ***Not my decision***
    Last edited by Chad J; Feb 13, 2003 at 16:29.

  8. #8
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <editorial> What retards </editorial>

    anyhow, ok. Did you make sure to give the ID 'movieEmbed' to the <embed> ???

    <embed id="movieEmbed" controls="ImageWindow"
    CONSOLE="Clip1"
    TYPE="audio/x-pn-realaudio-plugin"
    SRC="http://play.rbn.com/?url=mysite/mtsite/g2demand/soaring/vidid.rm&proto=rtsp"
    width="320" height="240"
    AUTOSTART="true"
    maintainaspect="true">
    </EMBED>
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  9. #9
    SitePoint Zealot
    Join Date
    Dec 1999
    Location
    Highlands Ranch, CO
    Posts
    193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Beetle,

    Sorry I did not reply earilier. I was out of the office.

    Anyhow, yes, I copied your code exactly. Not sure what is the problem...

  10. #10
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, according to this page the setAttribute() method is case-sensitive, unless you add the third parameter. You could do this, or just change the case.

    document.getElementById( 'movieEmbed' ).setAttribute( "SRC", vidURL );

    or

    document.getElementById( 'movieEmbed' ).setAttribute( "src", vidURL, 0 );

    or leave it alone and lowercase the attributes in your HTML, which I recommend since that's the standard for XHTML
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •