Results 1 to 5 of 5

Thread: innerhtml question

  1. #1
    Join Date
    Oct 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question innerhtml question

    I am trying to create a page that has 3 different links. Depending on the link selected, a different video file will play in a targeted area. Can I do this with a getElementByID? If so, what would be the appropriate coding to show the video file?

    Thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That's (upper and lower case matters with these):

    innerHTML

    and:

    getElementById

    Generally videos must be displayed using a paired object/embed tag. Object for IE, embed for other browsers. Syntax varies depending upon the type of video or movie it is. A .mov type movie file will often display itself using Quick Time if the browser is so configured (many are) and the file is launched in an iframe or its own window.

    If you want to use just one page, find out the object/embed code needed to display your particular type of video (a Google search should turn up several serviceable syntaxes for your desired video file type). You can then use document.getElementById to access a wrapper element for that tag set and change its innerHTML to switch the videos. A better scheme IMHO would be to use an iframe for the viewing area and just have your links target it with the video files or (better yet) pages each containing one video's object/embed code.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John-
    Thanks for the info but I'm still having problems.

    I have the syntax for the media player that I want to use and need to add some paramaters. How can I use getElementByID to invoke the media player? The IFrame idea didn't work as I also need to invoke a video description using the same onClick event. The info for the media player is as follows:

    <OBJECT ID="Player" width="250" height="140"
    style="position:absolute; left:200;top:100;"
    CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
    type="application/x-oleobject">
    <PARAM NAME="SendPlayStateChangeEvents" VALUE="True">
    <PARAM NAME="AutoStart" VALUE="False">
    <PARAM name="uiMode" value="none">
    <PARAM name="PlayCount" value="1">
    </OBJECT>

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    How would this description appear, as HTML or in the player? If as HTML, you could include the code for the player and description on each separate page to be loaded into the iframe. If in the player, likewise - just using the code for the player on these separate pages.

    I don't see any embed tag with your object tag. One is most likely required for compatibility with other browsers.

    As the tags (object alone or, as I believe it should be, object/embed pairs) involved are complex, especially the object one, the normal method of getting the tag by id and altering a property (parameter) of it on the fly may not work here. If it will, I am not aware of the syntax. The normal syntax for something like that, with - say, an image tag, could be like:

    Code:
    <img id="pic1" src="photo1.jpg"><br>
    
    <input type="button" value="Photo 2" onclick="document.getElementById('pic1').src='photo2.jpg'">
    Singling out parameters from the object tag would require something a bit different. An alternative would be somewhat as you first imagined, using getElementById and innerHTML. A wrapper would be needed and the new object tag (different and prepared ahead of time, here I've just used your code twice) written to it:

    Code:
    <script type="text/javascript">
    var vidTag='<OBJECT ID="Player" width="250" height="140" style="position:absolute; left:200;top:100;"CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"type="application/x-oleobject"><PARAM NAME="SendPlayStateChangeEvents" VALUE="True"><PARAM NAME="AutoStart" VALUE="False"><PARAM name="uiMode" value="none"><PARAM name="PlayCount" value="1"></OBJECT>'
    </script>
    
    <div id="vidarea">
    <OBJECT ID="Player" width="250" height="140" 
    style="position:absolute; left:200;top:100;"
    CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
    type="application/x-oleobject">
    <PARAM NAME="SendPlayStateChangeEvents" VALUE="True">
    <PARAM NAME="AutoStart" VALUE="False">
    <PARAM name="uiMode" value="none">
    <PARAM name="PlayCount" value="1">
    </OBJECT>
    </div>
    
    <input type="button" value="Video 2" onclick="document.GetElementById('vidarea').innerHTML='vidTag'">
    Several of these vidTag variables could be defined ahead of time, each with its own unique name or as part of an array.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There is another person working on similar, see:

    This Post
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •