DivX Web Player Plug-In Samples: Multiple Video Files



Multiple Video Files

This sample demonstrates how to use JavaScript to allow people browsing the page to select the video from a drop-down list.


Choose a video to play:

Before reading further, and if you haven't already done so, you should take a look at the Basic Scripting sample in order to fully understand the principles used here.

Using the framework of the Basic Scripting sample we will define a function that uses the Open() method of the plug-in to make it open a new URL. We use the following code:


    <object id="ie_plugin" classid="clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616"
            width="320" height="212"
            codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab">

            <embed id="np_plugin" type="video/divx"
                   width="320" height="212"
                   pluginspage="http://go.divx.com/plugin/download/">
            </embed>
    </object>

    <script type="text/javascript">

    //
    // This code detects which browser we are
    // running into (IE or others) and assigns
    // the correct element (object or embed) to
    // the "plugin" variable, that we will use.
    //

    var plugin;

    if(navigator.userAgent.indexOf('MSIE') != -1)
    {
        plugin = document.getElementById('ie_plugin');
    }
    else
    {
        plugin = document.getElementById('np_plugin');
    }

    //
    // This is a local JS function used by our form
    // element to call the plugin functions using
    // the "plugin" variable that we defined above
    //

    function openNewMovie()
    {
        var url = document.forms['videoSelector'].movie.value;

        if(url != '')
        {
            plugin.Open(url);
        }
    }

    </script>
    

Note that here we have ommited the src parameters in both the object and embed tags so that there is no video loaded by default at the start. Once we have the JavaScript function that will open a video on-demand, we can call it through the onChange callback of the <select> HTML element to call it when the selection changes.

Here is the <form> element that we used in this page to create the drop-down selector:


    <form name="videoSelector">
    Choose a video to play:
    <select name="movie" onChange="javascript:openNewMovie();">
      <option value="" selected>
      <option value="http://trailers.divx.com/Columnbia/ThePinkPanther.avi">Video 1
      <option value="http://trailers.divx.com/Sony/UnderworldEvolution.avi">Video 2
      <option value="http://trailers.divx.com/Columnbia/DavinciCode.avi">Video 3
    </select>
    </form>
    

Note how we added onChange="javascript:openNewMovie();" to the select element. This calls the openNewMovie() function each time the selection is changed by the user. If you look back at the openNewMovie() function you'll see that it does:


    var url = document.forms['videoSelector'].movie.value;
    

This retrieves the value from the current selection of the drop down list. Note that the URL referenced in the elements of the drop-down list need to be absolute, that is need to start with "http://" for this trick to work.


Back to samples index