The following code allows the user to toggle from the standard embedded 'panel' type of view to the full size of the screen when the user presses the 'm' key.
All works well unless the mouse pointer happens to fall inside the vlc div - in which case 'm' toggles mute. If you move the mouse to the outer edge of the screen (or any point outside the vlc div) events are propagated to the window and the javascript exectutes.
Is this a problem with the embedded VLC player or with Firefox?
* - I was toggling to full screen but the Event problem meant that there was no chance of getting back.
Code: Select all
<html>
<head>
<script language="Javascript">
var vlc;
videoEventKey = { REWIND : 37, VOLUME_UP : 38, FASTFORWARD : 39, VOLUME_DOWN : 40, PLAY_PAUSE : 13, MENU : 77 };
function defaultVideo() {
vlc = document.getElementById("vlc");
vlc.playlist.add("file:/usr/local/media/bbc.co.uk.285157478.mpg");
vlc.playlist.play();
document.getElementById("MainBody").focus(); // without this focus remains lost
}
function cleanUp() { vlc.playlist.stop(); }
function skipToSegment(segmentTime) { vlc.input.time = segmentTime; }
function toggleMenus() {
var menuPanel = document.getElementById("MenuPanel");
var infoPanel = document.getElementById("InfoPanel");
var videoPanel = document.getElementById("VideoPanel");
if (menuPanel.style.display == 'none') {
menuPanel.style.display = 'block'; infoPanel.style.display = 'block';
videoPanel.style.width = "1080px"; videoPanel.style.height = "824px";
} else {
menuPanel.style.display = 'none'; infoPanel.style.display = 'none';
videoPanel.style.width = "1280px"; videoPanel.style.height = "1024px";
}
}
function eventHandler(ev) {
switch (ev.type) {
case 'keydown':
switch (ev.keyCode) {
case videoEventKey.MENU:
toggleMenus();
break;
case videoEventKey.REWIND:
vlc.input.rate = vlc.input.rate - 1.0;
break;
case videoEventKey.VOLUME_UP:
break;
case videoEventKey.FASTFORWARD:
vlc.input.rate = vlc.input.rate + 1.0;
break;
case videoEventKey.VOLUME_DOWN:
break;
case videoEventKey.PLAY_PAUSE:
vlc.playlist.togglePause();
break;
}
break;
}
ev.cancelBubble = true;
document.getElementById("MainBody").focus(); // without this focus remains lost
}
</script>
<style>
div { border-style: solid; border-width: 2px; border-color: #EEF62A; color:#000000; font-family:Arial,Helvetica,sans-serif; font-size:18px; text-align:justify; vertical-align:middle;}
.GroupPage { width: 1280px; height: 1024px; position: absolute; top: 0px; left: 0px; }
.mPanel { position: absolute; top: 0px; left: 1080px; width: 200px; height: 1024px; background-color:#99CCFF; border:1px solid #FFFFFF; }
.vPanel { position: absolute; top: 0px; left: 0px; width: 1080px; height: 824px; }
.iP { position:absolute; top:625px; margin-left:50px; height:150px; width:1160px; background-color:#99CCFF; border:1px solid #FFFFFF; }
</style>
</head>
<body id="MainBody" onLoad="defaultVideo();" onKeyDown="eventHandler(event);" onUnload="cleanUp();" >
<form id="GroupForm">
<div id="GroupPage" class="GroupPage">
<div id="VideoPanel" class="vPanel"><embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2" id="vlc" width="100%" height="100%" loop="yes"></embed></div>
<div id="MenuPanel" class="mPanel">Menu Panel</div>
<div id="InfoPanel" class="iP">Info Panel</div>
</div>
</form>
</body>
</html>