I have a simple ASP.NET page that uses the VLC media player to play a video in IE. I also have four buttons to control the playback:
Play, Pause, Stop, and Mute
The four buttons call JavaScript functions that access the ActiveX control. When I click on any of the buttons, I get the following error in the JavaScript function:
"Microsoft JScript runtime error: 'vlc' is undefined".
However, if move the object tag for the vlc player outside the form tag, then the JavaScript works correctly, and I can control the video playback.
My question is why must the object tag be outside the form tag for this code to work correctly?
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="VlcTest.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>VLC Test Page</title>
<script type="text/javascript">
function mute() {
vlc.audio.toggleMute();
}
function play() {
vlc.playlist.play();
}
function stop() {
vlc.playlist.stop();
}
function pause() {
vlc.playlist.togglePause();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<object type="application/x-vlc-plugin"
id="vlc"
width="720"
height="548"
classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" >
<param name="MRL"
value="C:\Inetpub\wwwroot\Movies\Funny Cats.flv" />
<param name="volume" value="50" />
<param name="autoplay" value="false" />
<param name="loop" value="false" />
<param name="fullscreen" value="false" />
</object>
<br />
<div id="controls">
<input type="button" onclick="play()" value="Play" />
<input type="button" onclick="pause()" value="Pause" />
<input type="button" onclick="stop()" value="Stop" />
<input type="button" onclick="mute()" value="Mute" />
</div>
</div>
</form>
</body>
</html>