Can I control VLC from an HTML page?
Posted: 08 Oct 2020 02:59
Hi,
I’m trying to build an html in any browser with 3 Buttons so that when I click one of the 3 buttons an m4v file loads and plays on VLC. I pick up a sample on internet that looks simple enough and I modified it to do what I needed, started the HTML locally on my computer, but is not working, here is a copy of the html file I created:
<!DOCTYPE html>
<html>
<head>
<title>VLC Test</title>
<style>
.videoButton {
font-size: 4vw;
color: white;
width: 23%;
margin: 0% 5%;
}
#video1 {
background-color: red;
}
#video2 {
background-color: blue;
}
#video3 {
background-color: green;
}
</style>
</head>
<body>
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
width="640"
height="480"
id="vlc" />
<button id="video1" class="videoButton" type="button" onClick= "start(this)">Video 1</button>
<button id="video2" class="videoButton" type="button" onClick= "start(this)">Video 2</button>
<button id="video3" class="videoButton" type="button" onClick= "start(this)">Video 3</button>
<script>
function start(video){
var id;
switch (video) {
case "video1":
id=vlc.playlist.add("file:///Users/username//video1.m4v");
vlc.playlist.playItem(id);
break;
case "video2":
id=vlc.playlist.add("file:///Users/username//video2.m4v");
vlc.playlist.playItem(id);
break;
case "video3":
id=vlc.playlist.add("file:///Users/username//video3.m4v");
vlc.playlist.playItem(id);
break;
}
</script>
</body>
</html>
Then I went to the VLC official site and got an example of a file on “Documentation: WebPlugin document” https://wiki.videolan.org/Documentation:WebPlugin which was supposed to mute and unmute the audio of a file playing on VLC but is not working either.
<!DOCTYPE html>
<html>
<title>VLC Mozilla plugin test page</title>
<body>
<embed type="application/x-vlc-plugin"
width="640"
height="480"
id="vlc" />
<script type="text/javascript">
<!--
var vlc = document.getElementById("vlc");
vlc.audio.toggleMute();
//-->
</script>
</body>
</html>
It is supposed to mute and unmute a video playing on the VLC application as I taught or am I completely wrong?
am I missing something simple or is this never going to work this way?
Is there a better way to accomplish what I’m trying to accomplish?
Thank you all in advance for your help.
I’m trying to build an html in any browser with 3 Buttons so that when I click one of the 3 buttons an m4v file loads and plays on VLC. I pick up a sample on internet that looks simple enough and I modified it to do what I needed, started the HTML locally on my computer, but is not working, here is a copy of the html file I created:
<!DOCTYPE html>
<html>
<head>
<title>VLC Test</title>
<style>
.videoButton {
font-size: 4vw;
color: white;
width: 23%;
margin: 0% 5%;
}
#video1 {
background-color: red;
}
#video2 {
background-color: blue;
}
#video3 {
background-color: green;
}
</style>
</head>
<body>
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
width="640"
height="480"
id="vlc" />
<button id="video1" class="videoButton" type="button" onClick= "start(this)">Video 1</button>
<button id="video2" class="videoButton" type="button" onClick= "start(this)">Video 2</button>
<button id="video3" class="videoButton" type="button" onClick= "start(this)">Video 3</button>
<script>
function start(video){
var id;
switch (video) {
case "video1":
id=vlc.playlist.add("file:///Users/username//video1.m4v");
vlc.playlist.playItem(id);
break;
case "video2":
id=vlc.playlist.add("file:///Users/username//video2.m4v");
vlc.playlist.playItem(id);
break;
case "video3":
id=vlc.playlist.add("file:///Users/username//video3.m4v");
vlc.playlist.playItem(id);
break;
}
</script>
</body>
</html>
Then I went to the VLC official site and got an example of a file on “Documentation: WebPlugin document” https://wiki.videolan.org/Documentation:WebPlugin which was supposed to mute and unmute the audio of a file playing on VLC but is not working either.
<!DOCTYPE html>
<html>
<title>VLC Mozilla plugin test page</title>
<body>
<embed type="application/x-vlc-plugin"
width="640"
height="480"
id="vlc" />
<script type="text/javascript">
<!--
var vlc = document.getElementById("vlc");
vlc.audio.toggleMute();
//-->
</script>
</body>
</html>
It is supposed to mute and unmute a video playing on the VLC application as I taught or am I completely wrong?
am I missing something simple or is this never going to work this way?
Is there a better way to accomplish what I’m trying to accomplish?
Thank you all in advance for your help.