We use the following video element on the server:
We cannot load any 3:rd party help scripts.
The small video 480 x 272 is uploaded permanently to server RAM.
Much trouble making this work.
... this is the version we use now ...
<div>
<select id="quality" onchange="Selector_func()" autocomplete='off'>
<option selected>SD 480 x 272 MP4/FLV/OGV</option>
<option>HD 1920 x 1080 MP4</option>
<option>HD 1920 x 1080 FLV</option>
</select>
<div id="video_DIV" >
<video id="tufavideo" width="480" preload="metadata" controls>
<source src="../../images/film/limit_on_democracy_sd.mp4" type="video/mp4">
<source src="../../images/film_hd/limit_on_democracy_SD.flv" type="video/x-flv">
<source src="../../images/film_hd/limit_on_democracy_sd.ogv" type="video/ogg">
</video>
</div>
</div>
<script type="text/javascript">
var Selector = document.getElementById( "quality");
var video_event;
function Selector_func()
{
var obj = document.getElementById( "video_DIV");
var curtime;
var select;
var obj_text_480;
var obj_text_1920_mp4;
var obj_text_1920_flv;
obj_text_480 =
'<video id="tufavideo" width="480" preload="metadata" controls> '+
'<source src="../../images/film/limit_on_democracy_sd.mp4" type="video/mp4"> ' +
'<source src="../../images/film_hd/limit_on_democracy_SD.flv" type="video/x-flv"> ' +
'<source src="../../images/film_hd/limit_on_democracy_sd.ogv" type="video/ogg"> ' +
'</video>';
obj_text_1920_mp4 =
'<video id="tufavideo" width="960" preload="metadata" controls> '+
'<source src="../../images/film_hd/limit_on_democracy_hd.mp4" type="video/mp4"> '+
'</video>';
obj_text_1920_flv =
'<video id="tufavideo" width="960" preload="metadata" controls> '+
'<source src="../../images/film_hd/limit_on_democracy_hd.flv" type="video/x-flv"> '+
'</video>';
select = Selector.selectedIndex;
video_elem = document.getElementById( "tufavideo");
curtime = video_elem.currentTime;
if ( select == 0)
{
obj.innerHTML = obj_text_480;
}
else
if ( select == 1)
{
obj.innerHTML = obj_text_1920_mp4;
}
else
if ( select == 2)
{
obj.innerHTML = obj_text_1920_flv;
}
video_event = document.getElementsByTagName( "video")[ 0];
if ( curtime > 0)
{
// Only set if video started
video_event.addEventListener(
"playing",
function ()
{
if ( curtime > 0)
{
// Only set start once ...
var video_elem;
video_elem = document.getElementById( "tufavideo");
video_elem.currentTime = curtime;
curtime = 0;
}
}, true);
}
// Start video if control is used
video_event. play();
};
</script>