Skip to content

Instantly share code, notes, and snippets.

@louischatriot louischatriot/gist:5698805
Last active Jun 27, 2018

Embed
What would you like to do?
Trying to use the VLC plugin work in windowless mode on linux. This HTML file is the windowless example from the Git repo for the plugin (git://git.videolan.org/npapi-vlc.git). I just added one line (L238) that tries to draw a red square on top of the player, but it is behind ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<title>VLC Plugin test page</TITLE>
<style>
.inputTrackerInput {
height:20;
width:30;
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
}
body {background: grey;}
</style>
<script language="JavaScript"><!--
function init()
{
if( navigator.appName.indexOf("Microsoft Internet")==-1 )
{
onVLCPluginReady()
}
else if( document.readyState == 'complete' )
{
onVLCPluginReady();
}
else
{
/* Explorer loads plugins asynchronously */
document.onreadystatechange=function()
{
if( document.readyState == 'complete' )
{
onVLCPluginReady();
}
}
}
}
function getVLC(name)
{
if (window.document[name])
{
return window.document[name];
}
if (navigator.appName.indexOf("Microsoft Internet")==-1)
{
if (document.embeds && document.embeds[name])
return document.embeds[name];
}
else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
{
return document.getElementById(name);
}
}
function registerVLCEvent(event, handler)
{
var vlc = getVLC("vlc");
if (vlc) {
if (vlc.attachEvent) {
// Microsoft
vlc.attachEvent (event, handler);
} else if (vlc.addEventListener) {
// Mozilla: DOM level 2
vlc.addEventListener (event, handler, true);
} else {
// DOM level 0
eval("vlc.on" + event + " = handler");
}
}
}
function unregisterVLCEvent(event, handler)
{
var vlc = getVLC("vlc");
if (vlc) {
if (vlc.detachEvent) {
// Microsoft
vlc.detachEvent (event, handler);
} else if (vlc.removeEventListener) {
// Mozilla: DOM level 2
vlc.removeEventListener (event, handler, true);
} else {
// DOM level 0
eval("vlc.on" + event + " = null");
}
}
}
// JS VLC API callbacks
function handleMediaPlayerMediaChanged()
{
document.getElementById("info").innerHTML = "Media Changed";
}
function handle_MediaPlayerNothingSpecial()
{
document.getElementById("state").innerHTML = "Idle...";
}
function handle_MediaPlayerOpening()
{
onOpen();
}
function handle_MediaPlayerBuffering(val)
{
document.getElementById("info").innerHTML = val + "%";
}
function handle_MediaPlayerPlaying()
{
onPlay();
}
function handle_MediaPlayerPaused()
{
onPause();
}
function handle_MediaPlayerStopped()
{
onStop();
}
function handle_MediaPlayerForward()
{
document.getElementById("state").innerHTML = "Forward...";
}
function handle_MediaPlayerBackward()
{
document.getElementById("state").innerHTML = "Backward...";
}
function handle_MediaPlayerEndReached()
{
onEnd();
}
function handle_MediaPlayerEncounteredError()
{
onError();
}
function handle_MediaPlayerTimeChanged(time)
{
var vlc = getVLC("vlc");
var info = document.getElementById("info");
if( vlc )
{
var mediaLen = vlc.input.length;
if( mediaLen > 0 )
{
// seekable media
info.innerHTML = formatTime(time)+"/"+formatTime(mediaLen);
}
}
}
function handle_MediaPlayerPositionChanged(val)
{
// set javascript slider to correct position
}
function handle_MediaPlayerSeekableChanged(val)
{
setSeekable(val);
}
function handle_MediaPlayerPausableChanged(val)
{
setPauseable(val);
}
function handle_MediaPlayerTitleChanged(val)
{
//setTitle(val);
document.getElementById("info").innerHTML = "Title: " + val;
}
function handle_MediaPlayerLengthChanged(val)
{
//setMediaLength(val);
}
// VLC Plugin
function onVLCPluginReady()
{
registerVLCEvent("MediaPlayerMediaChanged", handleMediaPlayerMediaChanged);
registerVLCEvent("MediaPlayerNothingSpecial", handle_MediaPlayerNothingSpecial);
registerVLCEvent("MediaPlayerOpening", handle_MediaPlayerOpening);
registerVLCEvent("MediaPlayerBuffering", handle_MediaPlayerBuffering);
registerVLCEvent("MediaPlayerPlaying", handle_MediaPlayerPlaying);
registerVLCEvent("MediaPlayerPaused", handle_MediaPlayerPaused);
registerVLCEvent("MediaPlayerStopped", handle_MediaPlayerStopped);
registerVLCEvent("MediaPlayerForward", handle_MediaPlayerForward);
registerVLCEvent("MediaPlayerBackward", handle_MediaPlayerBackward);
registerVLCEvent("MediaPlayerEndReached", handle_MediaPlayerEndReached);
registerVLCEvent("MediaPlayerEncounteredError", handle_MediaPlayerEncounteredError);
registerVLCEvent("MediaPlayerTimeChanged", handle_MediaPlayerTimeChanged);
registerVLCEvent("MediaPlayerPositionChanged", handle_MediaPlayerPositionChanged);
registerVLCEvent("MediaPlayerSeekableChanged", handle_MediaPlayerSeekableChanged);
registerVLCEvent("MediaPlayerPausableChanged", handle_MediaPlayerPausableChanged);
registerVLCEvent("MediaPlayerTitleChanged", handle_MediaPlayerTitleChanged);
registerVLCEvent("MediaPlayerLengthChanged", handle_MediaPlayerLengthChanged);
}
function close()
{
unregisterVLCEvent("MediaPlayerMediaChanged", handleMediaPlayerMediaChanged);
unregisterVLCEvent("MediaPlayerNothingSpecial", handle_MediaPlayerNothingSpecial);
unregisterVLCEvent("MediaPlayerOpening", handle_MediaPlayerOpening);
unregisterVLCEvent("MediaPlayerBuffering", handle_MediaPlayerBuffering);
unregisterVLCEvent("MediaPlayerPlaying", handle_MediaPlayerPlaying);
unregisterVLCEvent("MediaPlayerPaused", handle_MediaPlayerPaused);
unregisterVLCEvent("MediaPlayerStopped", handle_MediaPlayerStopped);
unregisterVLCEvent("MediaPlayerForward", handle_MediaPlayerForward);
unregisterVLCEvent("MediaPlayerBackward", handle_MediaPlayerBackward);
unregisterVLCEvent("MediaPlayerEndReached", handle_MediaPlayerEndReached);
unregisterVLCEvent("MediaPlayerEncounteredError", handle_MediaPlayerEncounteredError);
unregisterVLCEvent("MediaPlayerTimeChanged", handle_MediaPlayerTimeChanged);
unregisterVLCEvent("MediaPlayerPositionChanged", handle_MediaPlayerPositionChanged);
unregisterVLCEvent("MediaPlayerSeekableChanged", handle_MediaPlayerSeekableChanged);
unregisterVLCEvent("MediaPlayerPausableChanged", handle_MediaPlayerPausableChanged);
unregisterVLCEvent("MediaPlayerTitleChanged", handle_MediaPlayerTitleChanged);
unregisterVLCEvent("MediaPlayerLengthChanged", handle_MediaPlayerLengthChanged);
}
//--></script>
<body onLoad="init();" onClose="close();">
<div style="width: 800; height: 200; top:200px; position: absolute; border: 1pt solid black; background: blue; border-radius: 5px; display: none;" id="overlay"></div>
<!-- This div should appear on top of the player -->
<div style="position: fixed; left: 100px; width: 100px; height: 100px; z-index: 1000; background-color: red;"></div>
<table>
<tr><td align="center" colspan="2">
<div id=player>
<!--
Insert VideoLAN.VLCPlugin.2
-->
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
width="640"
height="480"
id="vlc"
windowless="True"
events="True">
<param name="MRL" value="" />
<param name="ShowDisplay" value="True" />
<param name="AutoLoop" value="False" />
<param name="AutoPlay" value="False" />
<param name="Volume" value="50" />
<param name="toolbar" value="true" />
<param name="StartTime" value="0" />
<EMBED pluginspage="http://www.videolan.org"
type="application/x-vlc-plugin"
version="VideoLAN.VLCPlugin.2"
width="640"
height="480"
toolbar="true"
loop="true"
text="Waiting for video"
windowless="true"
name="vlc">
</EMBED>
</object>
</div>
</td></tr>
<tr><td colspan="2">
MRL:
<input size="90" id="targetTextField" value="">
<input type=submit value="Go" onClick="doGo(document.getElementById('targetTextField').value);">
<input type=submit value="Add" onClick="doAdd(document.getElementById('targetTextField').value);">
</td></tr>
<tr><td>
<input type=button id="PlayOrPause" value=" Play " onClick='doPlayOrPause();'>
<input type=button value="Stop" onClick='doStop();'>
</td><td width="15%">
<div id="info" style="text-align:center">-:--:--/-:--:--</div>
<div id="state" style="text-align:center">Stopped...</div>
</td>
</tr>
<tr>
<td>
<input type=button value="3D transform" onClick='doToggle3dTransform();'>
<input type=button value="Change opacity" onClick='doToggleOpacity();'>
<input type=button value="Rounded corners" onClick='doToggleRound();'>
</td>
</tr>
</table>
<SCRIPT language="javascript">
<!--
var rate = 0;
var prevState = 0;
var telxState = false;
var canPause = true;
var canSeek = true;
function setPauseable(val)
{
canPause = val;
}
function setSeekable(val)
{
canSeek = val;
}
function doSetSlider()
{
var vlc = getVLC("vlc");
// set slider to new position
if( vlc )
vlc.input.time = (vlc.input.length/2);
}
function doGetPosition()
{
var vlc = getVLC("vlc");
// set slider to new position
if (vlc)
alert( "position is " + vlc.input.time);
}
function doReverse(rate)
{
var vlc = getVLC("vlc");
if( vlc )
vlc.input.rate = -1.0 * vlc.input.rate;
}
function doAudioChannel(value)
{
var vlc = getVLC("vlc");
if( vlc )
vlc.audio.channel = parseInt(value);
}
function doAudioTrack(value)
{
var vlc = getVLC("vlc");
if( vlc )
{
vlc.audio.track = vlc.audio.track + value;
document.getElementById("trackTextField").innerHTML = vlc.audio.track;
}
}
function doAspectRatio(value)
{
var vlc = getVLC("vlc");
if( vlc )
vlc.video.aspectRatio = value;
}
function doSubtitle(value)
{
var vlc = getVLC("vlc");
if( vlc )
{
vlc.subtitle.track = vlc.subtitle.track + value;
document.getElementById("spuTextField").innerHTML = vlc.subtitle.track;
}
}
function doTelxPage(value)
{
var vlc = getVLC("vlc");
if( vlc )
vlc.video.teletext = parseInt(value);
}
function doToggleTeletext()
{
var vlc = getVLC("vlc");
if( vlc )
{
vlc.video.toggleTeletext();
if (telxState)
{
document.getElementById("telx").innerHTML = "Teletext on";
telxState = true;
}
else
{
document.getElementById("telx").innerHTML = "Teletext off";
telxState = false;
}
}
}
function doToggle3dTransform()
{
var vlc = getVLC("vlc");
var transform = "rotate3d(1,2,1, 45deg)";
if( vlc )
{
if (!vlc.style.transform)
{
vlc.style.transform = transform;
vlc.style.webkitTransform = transform;
}
else
{
vlc.style.transform = '';
vlc.style.webkitTransform = '';
}
}
}
function doToggleOpacity()
{
var vlc = getVLC("vlc");
var opacity = "0.5";
if( vlc )
{
if (!vlc.style.opacity)
{
vlc.style.opacity = opacity;
}
else
{
vlc.style.opacity = '';
}
}
}
function doToggleRound()
{
var vlc = getVLC("vlc");
var corner = "80px";
if( vlc )
{
if (!vlc.style.borderRadius)
{
vlc.style.borderRadius = corner;
}
else
{
vlc.style.borderRadius = '';
}
}
}
function doItemCount()
{
var vlc = getVLC("vlc");
if( vlc )
{
var count = vlc.playlist.items.count;
document.getElementById("itemCount").value = " Items " + count + " ";
}
}
function doRemoveItem(item)
{
var vlc = getVLC("vlc");
if( vlc )
vlc.playlist.items.remove(item);
}
function doPlaylistClearAll()
{
var vlc = getVLC("vlc");
if( vlc )
{
vlc.playlist.items.clear();
while( vlc.playlist.items.count > 0)
{
// wait till playlist empties.
}
doItemCount();
}
}
function updateVolume(deltaVol)
{
var vlc = getVLC("vlc");
if( vlc )
{
vlc.audio.volume += deltaVol;
document.getElementById("volumeTextField").innerHTML = vlc.audio.volume+"%";
}
}
function formatTime(timeVal)
{
if( typeof timeVal != 'number' )
return "-:--:--";
var timeHour = Math.round(timeVal / 1000);
var timeSec = timeHour % 60;
if( timeSec < 10 )
timeSec = '0'+timeSec;
timeHour = (timeHour - timeSec)/60;
var timeMin = timeHour % 60;
if( timeMin < 10 )
timeMin = '0'+timeMin;
timeHour = (timeHour - timeMin)/60;
if( timeHour > 0 )
return timeHour+":"+timeMin+":"+timeSec;
else
return timeMin+":"+timeSec;
}
// Old method of querying current state
// function doState() - depreceated
function doState()
{
var vlc = getVLC("vlc");
var newState = 0;
if( vlc )
newState = vlc.input.state;
if( newState == 0 )
{
// current media has stopped
onEnd();
}
else if( newState == 1 )
{
// current media is openning/connecting
onOpen();
}
else if( newState == 2 )
{
// current media is buffering data
onBuffer();
}
else if( newState == 3 )
{
// current media is now playing
onPlay();
}
else if( newState == 4 )
{
// current media is now paused
onPause();
}
else if( newState == 5 )
{
// current media has stopped
onStop();
}
else if( newState == 6 )
{
// current media has ended
onEnd();
}
else if( newState == 7 )
{
// current media encountered error
onError();
}
}
/* actions */
function doGo(targetURL)
{
var vlc = getVLC("vlc");
if( vlc )
{
vlc.playlist.items.clear();
while( vlc.playlist.items.count > 0 )
{
// clear() may return before the playlist has actually been cleared
// just wait for it to finish its job
}
var options = [":rtsp-tcp"];
var itemId = vlc.playlist.add(targetURL,"",options);
options = [];
if( itemId != -1 )
{
// play MRL
vlc.playlist.playItem(itemId);
}
else
{
alert("cannot play at the moment !");
}
doItemCount();
}
}
function doAdd(targetURL)
{
var vlc = getVLC("vlc");
var options = [":vout-filter=deinterlace", ":deinterlace-mode=linear"];
if( vlc )
{
vlc.playlist.add(targetURL, "", options);
options = [];
doItemCount();
}
}
function doPlayOrPause()
{
var vlc = getVLC("vlc");
if( vlc )
{
vlc.playlist.togglePause();
}
}
function doStop()
{
var vlc = getVLC("vlc");
if( vlc )
vlc.playlist.stop();
}
function doPlaySlower()
{
var vlc = getVLC("vlc");
if( vlc )
vlc.input.rate = vlc.input.rate / 2;
}
function doPlayFaster()
{
var vlc = getVLC("vlc");
if( vlc )
vlc.input.rate = vlc.input.rate * 2;
}
function doMarqueeOption(option, value)
{
var vlc = getVLC("vlc");
val = parseInt(value);
if( vlc )
{
if (option == 1)
vlc.video.marquee.color = val;
if (option == 2)
vlc.video.marquee.opacity = val;
if (option == 3)
vlc.video.marquee.position = value;
if (option == 4)
vlc.video.marquee.refresh = val;
if (option == 5)
vlc.video.marquee.size = val;
if (option == 6)
vlc.video.marquee.text = value;
if (option == 7)
vlc.video.marquee.timeout = val;
if (option == 8)
vlc.video.marquee.x = val;
if (option == 9)
vlc.video.marquee.y = val;
}
}
function doLogoOption(option, value)
{
var vlc = getVLC("vlc");
if( vlc )
{
if (option == 1)
vlc.video.logo.file(value);
if (option == 2)
vlc.video.logo.position = value;
val = parseInt(value);
if (option == 3)
vlc.video.logo.opacity = val;
if (option == 4)
vlc.video.logo.repeat = val;
if (option == 5)
vlc.video.logo.delay = val;
if (option == 6)
vlc.video.logo.x = val;
if (option == 7)
vlc.video.logo.y = val;
}
}
/* events */
function onOpen()
{
document.getElementById("state").innerHTML = "Opening...";
document.getElementById("PlayOrPause").value = "Pause";
}
function onBuffer()
{
document.getElementById("state").innerHTML = "Buffering...";
document.getElementById("PlayOrPause").value = "Pause";
}
function onPlay()
{
document.getElementById("state").innerHTML = "Playing...";
document.getElementById("PlayOrPause").value = "Pause";
onPlaying();
}
function onEnd()
{
document.getElementById("state").innerHTML = "End...";
}
var liveFeedText = ["Live", "((Live))", "(( Live ))", "(( Live ))"];
var liveFeedRoll = 0;
function onPlaying()
{
var vlc = getVLC("vlc");
var info = document.getElementById("info");
if( vlc )
{
var mediaLen = vlc.input.length;
if( mediaLen > 0 )
{
// seekable media
info.innerHTML = formatTime(vlc.input.time)+"/"+formatTime(mediaLen);
}
else
{
// non-seekable "live" media
liveFeedRoll = liveFeedRoll & 3;
info.innerHTML = liveFeedText[liveFeedRoll++];
}
}
}
function onPause()
{
document.getElementById("state").innerHTML = "Paused...";
document.getElementById("PlayOrPause").value = " Play ";
}
function onStop()
{
var vlc = getVLC("vlc");
document.getElementById("info").innerHTML = "-:--:--/-:--:--";
document.getElementById("state").innerHTML = "Stopped...";
document.getElementById("PlayOrPause").value = " Play ";
}
function onError()
{
var vlc = getVLC("vlc");
document.getElementById("state").innerHTML = "Error...";
}
//-->
</SCRIPT>
</body>
</HTML>
@louischatriot

This comment has been minimized.

Copy link
Owner Author

commented Jun 3, 2013

The div (a red square) on line 238 should be displayed on top of the player, not behind

@MinChanSike

This comment has been minimized.

Copy link

commented Oct 4, 2017

Why it is not fire any event with Flash v27.0.0?

@adithsc

This comment has been minimized.

Copy link

commented Jun 27, 2018

im unable to play a video using embeded attribute.
below is my code.
`

<title></title> `

Please help..
i tried on IE, firefox, chrome white screen is coming on each browser.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.