Ignore:
Timestamp:
01/11/12 19:06:36 (16 months ago)
Author:
pablo
Message:

Completes the InStream API with HTML5 mode support (644)

File:
1 edited

Legend:

Unmodified
Added
Removed

  • branches/fl5_instream/js/test/examples/instream.html

    r2043 r2047  
    11<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    22<html> 
    3     <head> 
    4         <title>Instream API Example</title> 
    5         <script type="text/javascript" src="../../bin-debug/jwplayer.js"> 
     3<head> 
     4<title>Instream API Example</title> 
     5<script type="text/javascript" src="../../bin-debug/jwplayer.js"> 
    66        </script> 
    7         <script type="text/javascript" src="settings.js"> 
     7<script type="text/javascript" src="settings.js"> 
    88        </script> 
    9             <style type="text/css"> 
    10                 form { 
    11                         margin-bottom: 15px; 
    12                         overflow: hidden; 
    13                 } 
    14                 formset { 
    15                         display:block; 
    16                         float:left; 
    17                         margin-right: 15px 
    18                 } 
    19             </style> 
    20     </head> 
    21     <body> 
    22         <script type="text/javascript"> 
     9<style type="text/css"> 
     10form { 
     11        margin-bottom: 15px; 
     12        overflow: hidden; 
     13} 
     14 
     15formset { 
     16        display: block; 
     17        float: left; 
     18        margin-right: 15px 
     19} 
     20</style> 
     21</head> 
     22<body> 
     23<script type="text/javascript"> 
    2324            document.write("<h1>" + document.title + "</h1>"); 
    2425        </script> 
    2526 
    26           <form> 
    27           <formset> 
    28                 <h3>Player Options</h3> 
    29             <label>Rendering mode</label> 
    30             <select id="mode"> 
    31               <option id="mode_flashonly" value="flashonly" selected="selected">Flash Only</option> 
    32               <option id="mode_html5only" value="html5only">HTML5 Only</option> 
    33             </select><br/> 
    34             <label>Instream Timing</label> 
    35             <select id="timing" onchange="return setupAll();"> 
    36               <option id="timing_beforeplay" value="beforeplay" selected="selected">onBeforePlay</option> 
    37               <option id="timing_button" value="button">Button click</option> 
    38               <option id="timing_time" value="time">At 5 seconds</option> 
    39               <option id="timing_complete" value="complete">onComplete</option> 
    40             </select><br/> 
    41             <label>Controlbar Position</label> 
    42             <select id="controlbar" onchange="return setupAll();"> 
    43               <option id="controlbar_over" value="over" selected="selected">Over</option> 
    44               <option id="controlbar_bottom" value="bottom">Bottom</option> 
    45               <option id="controlbar_top" value="top">Top</option> 
    46             </select><br/> 
    47             <label>Playlist Position</label> 
    48             <select id="playlist" onchange="return setupAll();"> 
    49               <option id="playlist_none" value="none" selected="selected">None</option> 
    50               <option id="playlist_right" value="right">Right</option> 
    51             </select><br/>             
    52             <label>Repeat</label> 
    53             <select id="repeat" onchange="return setupAll();"> 
    54               <option id="repeat_none" value="none" selected="selected">None</option> 
    55               <option id="repeat_list" value="list">List</option> 
    56               <option id="repeat_always" value="always">Always</option> 
    57               <option id="repeat_single" value="single">Single</option> 
    58             </select><br/>             
    59             <label>Skin</label> 
    60             <select id="skin" onchange="return setupAll();"> 
    61               <option id="skin_" value="" selected="selected">None</option> 
    62               <option id="skin_beelden" value="beelden">Beelden</option> 
    63               <option id="skin_classic" value="classic">Classic</option> 
    64             </select><br/> 
    65             <label>Stretching</label> 
    66             <select id="stretching" onchange="return setupAll();"> 
    67               <option id="stretching_uniform" value="uniform" selected="selected">Uniform</option> 
    68               <option id="stretching_exactfit" value="exactfit">Exactfit</option> 
    69               <option id="stretching_fill" value="fill">Fill</option> 
    70               <option id="stretching_none" value="none">None</option> 
    71             </select> 
    72           </formset>           
    73           <formset> 
    74                 <h3>InStream Options</h3> 
    75             <label>Controlbar Seekable</label> 
    76             <select id="seekable" onchange="return setupAll();"> 
    77               <option id="seekable_always" value="always" selected="selected">Always</option> 
    78               <option id="seekable_never" value="never">Never</option> 
    79               <option id="seekable_backwards" value="backwards">Backwards</option> 
    80             </select><br/> 
    81             <label>Controlbar Pausable</label> 
    82             <select id="pausable" onchange="return setupAll();"> 
    83               <option id="pausable_true" value="true" selected="selected">True</option> 
    84               <option id="pausable_false" value="false">False</option> 
    85             </select><br/> 
    86             <label>Controlbar Stoppable</label> 
    87             <select id="stoppable" onchange="return setupAll();"> 
    88               <option id="stoppable_true" value="true" selected="selected">True</option> 
    89               <option id="stoppable_false" value="false">False</option> 
    90             </select><br/> 
    91             <label>Playlist Clickable</label> 
    92             <select id="playlist_clickable" onchange="return setupAll();"> 
    93               <option id="playlist_clickable_true" value="true" selected="selected">True</option> 
    94               <option id="playlist_clickable_false" value="false">False</option> 
    95             </select><br/> 
    96             <label>Autoload</label> 
    97             <select id="autoload" onchange="return setupAll();"> 
    98               <option id="autoload_false" value="false" selected="selected">False</option> 
    99               <option id="autoload_true" value="true">True</option> 
    100             </select><br/> 
    101           </formset> 
    102           <formset> 
    103                 <h3>Log Events</h3> 
    104                 <label>Action</label> 
    105                 <select id="log"> 
    106                         <option id="log_console" value="console" selected="selected">console.log</option> 
    107                         <option id="log_alert" value="alert">alert</option> 
    108                 </select><br/> 
    109                 <label>Event</label> 
    110                 <select id="events" multiple="multiple" size="10"> 
    111                         <option value="onPlay">onPlay</option> 
    112                         <option value="onPause">onPause</option>  
    113                         <option value="onBuffer">onBuffer</option>  
    114                         <option value="onIdle">onIdle</option>  
    115                         <option value="onComplete">onComplete</option>  
    116                         <option value="onTime">onTime</option>  
    117                         <option value="onSeek">onSeek</option>  
    118                         <option value="onMeta">onMeta</option>  
    119                         <option value="onMute">onMute</option>  
    120                         <option value="onVolume">onVolume</option>  
    121                         <option value="onFullscreen">onFullscreen</option>  
    122                         <option value="onError">onError</option>  
    123                         <option value="onInstreamClick">onInstreamClick</option> 
    124                         <option value="onInstreamDestroyed">onInstreamDestroyed</option> 
    125                 </select> 
    126           </formset>  
    127  
    128             <button id="go" onclick="return setupAll();" style="float:left; clear:left">Update</button> 
    129           </form> 
    130         </p> 
    131          
    132          
    133         <hr/> 
    134          
    135         <div style="width:100%; height:300px; overflow:auto"> 
    136                 <div style="float:left;"> 
    137                         <div height="270" id="player" width="480"> 
    138                                 Player should replace this 
    139                         </div> 
    140                 </div> 
    141                 <div style="float:left; margin-left: 15px;"> 
    142                         <button id="instreamInit" onclick="initInstream();return false;" style="display:none">Click to initialize Instream</button> 
    143                         <div id="instreamActions"> 
    144                                 <label>Instream Controls</label> 
    145                                         <button id="play" onclick="playInstream();return false;">Play</button>                           
    146                                         <button id="pause" onclick="pauseInstream();return false;">Pause</button>                                
    147                                         <button id="seek" onclick="seekInstream(10);return false;">seek(10)</button>                             
    148                                         <button id="getters" onclick="updateGetters();return false;">Update Getters</button> 
    149                                         <button id="destroy" onclick="destroyInstream();return false">Destroy</button> 
    150                                         <br/> 
    151                                         <label>State:</label><span id="state">IDLE</span><br/> 
    152                                         <label>Position:</label><span id="position">0.0</span><br/> 
    153                                         <label>Duration:</label><span id="duration">0.0</span> 
    154                         </div> 
    155                 </div> 
    156         </div> 
    157         <script type="text/javascript"> 
     27<form><formset> 
     28<h3>Player Options</h3> 
     29<label>Rendering mode</label> <select id="mode"> 
     30        <option id="mode_flash" value="flash" selected="selected">Flash 
     31        -> HTML5</option> 
     32        <option id="mode_html5" value="html5">HTML5 -> Flash</option> 
     33</select><br /> 
     34<label>Instream Timing</label> <select id="timing" 
     35        onchange="return setupAll();"> 
     36        <option id="timing_beforeplay" value="beforeplay" selected="selected">onBeforePlay</option> 
     37        <option id="timing_button" value="button">Button click</option> 
     38        <option id="timing_time" value="time">At 5 seconds</option> 
     39        <option id="timing_complete" value="complete">onComplete</option> 
     40</select><br /> 
     41<label>Controlbar Position</label> <select id="controlbar" 
     42        onchange="return setupAll();"> 
     43        <option id="controlbar_over" value="over" selected="selected">Over</option> 
     44        <option id="controlbar_bottom" value="bottom">Bottom</option> 
     45        <option id="controlbar_top" value="top">Top</option> 
     46</select><br /> 
     47<label>Playlist Position</label> <select id="playlist" 
     48        onchange="return setupAll();"> 
     49        <option id="playlist_none" value="none" selected="selected">None</option> 
     50        <option id="playlist_right" value="right">Right</option> 
     51</select><br /> 
     52<label>Repeat</label> <select id="repeat" onchange="return setupAll();"> 
     53        <option id="repeat_none" value="none" selected="selected">None</option> 
     54        <option id="repeat_list" value="list">List</option> 
     55        <option id="repeat_always" value="always">Always</option> 
     56        <option id="repeat_single" value="single">Single</option> 
     57</select><br /> 
     58<label>Skin</label> <select id="skin" onchange="return setupAll();"> 
     59        <option id="skin_" value="" selected="selected">None</option> 
     60        <option id="skin_beelden" value="beelden">Beelden</option> 
     61        <option id="skin_classic" value="classic">Classic</option> 
     62</select><br /> 
     63<label>Stretching</label> <select id="stretching" 
     64        onchange="return setupAll();"> 
     65        <option id="stretching_uniform" value="uniform" selected="selected">Uniform</option> 
     66        <option id="stretching_exactfit" value="exactfit">Exactfit</option> 
     67        <option id="stretching_fill" value="fill">Fill</option> 
     68        <option id="stretching_none" value="none">None</option> 
     69</select> </formset> <formset> 
     70<h3>InStream Options</h3> 
     71<label>Controlbar Seekable</label> <select id="seekable" 
     72        onchange="return setupAll();"> 
     73        <option id="seekable_always" value="always" selected="selected">Always</option> 
     74        <option id="seekable_never" value="never">Never</option> 
     75        <option id="seekable_backwards" value="backwards">Backwards</option> 
     76</select><br /> 
     77<label>Controlbar Pausable</label> <select id="controlbarpausable" 
     78        onchange="return setupAll();"> 
     79        <option id="controlbarpausable_true" value="true" selected="selected">True</option> 
     80        <option id="controlbarpausable_false" value="false">False</option> 
     81</select><br /> 
     82<label>Controlbar Stoppable</label> <select id="controlbarstoppable" 
     83        onchange="return setupAll();"> 
     84        <option id="controlbarstoppable_true" value="true" selected="selected">True</option> 
     85        <option id="controlbarstoppable_false" value="false">False</option> 
     86</select><br /> 
     87<label>Playlist Clickable</label> <select id="playlistclickable" 
     88        onchange="return setupAll();"> 
     89        <option id="playlistclickable_true" value="true" selected="selected">True</option> 
     90        <option id="playlistclickable_false" value="false">False</option> 
     91</select><br /> 
     92<label>Autoload</label> <select id="autoload" 
     93        onchange="return setupAll();"> 
     94        <option id="autoload_false" value="false" selected="selected">False</option> 
     95        <option id="autoload_true" value="true">True</option> 
     96</select><br /> 
     97</formset> <formset> 
     98<h3>Log Events</h3> 
     99<label>Action</label> <select id="log"> 
     100        <option id="log_console" value="console" selected="selected">console.log</option> 
     101        <option id="log_alert" value="alert">alert</option> 
     102</select><br /> 
     103<label>Event</label> <select id="events" multiple="multiple" size="10"> 
     104        <option id="events_onPlay" value="onPlay">onPlay</option> 
     105        <option id="events_onPause" value="onPause">onPause</option> 
     106        <option id="events_onBuffer" value="onBuffer">onBuffer</option> 
     107        <option id="events_onIdle" value="onIdle">onIdle</option> 
     108        <option id="events_onComplete" value="onComplete">onComplete</option> 
     109        <option id="events_onTime" value="onTime">onTime</option> 
     110        <option id="events_onSeek" value="onSeek">onSeek</option> 
     111        <option id="events_onMeta" value="onMeta">onMeta</option> 
     112        <option id="events_onMute" value="onMute">onMute</option> 
     113        <option id="events_onVolume" value="onVolume">onVolume</option> 
     114        <option id="events_onFullscreen" value="onFullscreen">onFullscreen</option> 
     115        <option id="events_onError" value="onError">onError</option> 
     116        <option id="events_onInstreamClick" value="onInstreamClick">onInstreamClick</option> 
     117        <option id="events_onInstreamDestroyed" value="onInstreamDestroyed">onInstreamDestroyed</option> 
     118</select> </formset> 
     119 
     120<button id="go" onclick="return setupAll();" 
     121        style="float: left; clear: left">Update</button> 
     122</form> 
     123</p> 
     124 
     125 
     126<hr /> 
     127 
     128<div style="width: 100%; height: 300px; overflow: auto"> 
     129<div style="float: left;"> 
     130<div height="270" id="player" width="480">Player should replace 
     131this</div> 
     132</div> 
     133<div style="float: left; margin-left: 15px;"> 
     134<button id="instreamInit" onclick="initInstream();return false;" 
     135        style="display: none">Click to initialize Instream</button> 
     136<div id="instreamActions"><label>Instream Controls</label> 
     137<button id="play" onclick="playInstream();return false;">Play</button> 
     138<button id="pause" onclick="pauseInstream();return false;">Pause</button> 
     139<button id="seek" onclick="seekInstream(10);return false;">seek(10)</button> 
     140<button id="getters" onclick="updateGetters();return false;">Update 
     141Getters</button> 
     142<button id="destroy" onclick="destroyInstream();return false">Destroy</button> 
     143<br /> 
     144<label>State:</label><span id="state">IDLE</span><br /> 
     145<label>Position:</label><span id="position">0.0</span><br /> 
     146<label>Duration:</label><span id="duration">0.0</span></div> 
     147</div> 
     148</div> 
     149<script type="text/javascript"> 
    158150                var player = null; 
    159151                var instream = null; 
    … …  
    171163                instreamOptions = { 
    172164                                        controlbarseekable: document.getElementById('seekable').value, 
    173                                         controlbarpausable: document.getElementById('pausable').value, 
    174                                         controlbarstoppable: document.getElementById('stoppable').value, 
    175                                         playlistclickable: document.getElementById('playlist_clickable').value, 
     165                                        controlbarpausable: document.getElementById('controlbarpausable').value, 
     166                                        controlbarstoppable: document.getElementById('controlbarstoppable').value, 
     167                                        playlistclickable: document.getElementById('playlistclickable').value, 
    176168                                        autoload: document.getElementById('autoload').value 
    177169                                }; 
    … …  
    241233                        setupBlock.skin = "../../../../../tags/skins/" + skin + "/" + skin + ".zip"; 
    242234                    } 
    243                  
     235 
     236                if (player) { 
     237                                        player.remove(); 
     238                } 
    244239                player = jwplayer("player").setup(setupBlock); 
    245240                    return false;        
    … …  
    304299 
    305300 
     301                        function setDefaultEvents() { 
     302                                var selectedEvents = getVariable("events").split(','); 
     303                                for (var i=0; i<selectedEvents.length; i++) { 
     304                                        var opt = document.getElementById("events_"+selectedEvents[i]); 
     305                                        if (opt) { 
     306                                                opt.selected = true; 
     307                                        } 
     308                                } 
     309                        } 
     310                         
    306311                        function setupEvents() { 
    307312                                if (!instream) return; 
     313 
     314                                var allOptions = document.getElementById("events").options; 
    308315                                 
    309                                 var allOptions = document.getElementById("events").options; 
    310316                                for (var i=0; i < allOptions.length; i++) { 
    311317                                        var option = allOptions[i]; 
    … …  
    326332                        } 
    327333 
     334                        function getVariable(name) { 
     335                                var regex = new RegExp(name+"=([\\w\\,]+)"); 
     336                                var match = window.location.href.match(regex); 
     337                                if (match && match.length > 1) { 
     338                                        return match[1]; 
     339                                } else { 
     340                                        return ""; 
     341                                } 
     342                        } 
     343                         
    328344                        function setDefault(name) { 
    329                                 var regex = new RegExp(name+"=(\\w+)"); 
    330                                 var val = window.location.href.match(regex); 
    331                                 if (val && val.length==2) { 
    332                                         document.getElementById(name+"_"+val[1]).selected = true; 
    333                                 } 
    334                         }                                
     345                                var val = getVariable(name); 
     346                                if (val) { 
     347                                        document.getElementById(name+"_"+val).selected = true; 
     348                                } 
     349                        } 
    335350 
    336351                        setDefault("timing"); 
    … …  
    343358 
    344359                        setDefault("seekable"); 
    345                         setDefault("pausable"); 
    346                         setDefault("stoppable"); 
    347                         setDefault("playlist_clickable"); 
     360                        setDefault("controlbarpausable"); 
     361                        setDefault("controlbarstoppable"); 
     362                        setDefault("playlistclickable"); 
    348363                        setDefault("autoload"); 
     364                        setDefaultEvents(); 
    349365                         
    350366                        setupAll(); 
    351367        </script> 
    352          
    353         <h3>HTML code</h3> 
    354     </body> 
     368 
     369<h3>HTML code</h3> 
     370</body> 
    355371</html> 
Note: See TracChangeset for help on using the changeset viewer.