An AngularJS directive to include VLC Web Player code with a more beautiful & advanced interface
- Play/Pause the video
- View current time and video duration
- Change audio and subtitle track
- Mute/Unmute
- Toggle Fullscreen
You must have VLC and the Web plugin installed on your computer, more informtions on the VLC website. For OS X users, you can find the plugin (actually in beta) here.
Install the component via Bower
bower install --save angular-vlc
Or simply download the files in the dist folder
Add the CSS
<link rel="stylesheet" href="components/angular-vlc/dist/VLCPlayer.min.css">
Load the JavaScript file
<link rel="text/javascript" href="components/angular-vlc/dist/VLCPlayer.min.js">
And finally add the dependencies to your AngularJS project
var myAppModule = angular.module('MyApp', ['kdarcel.vlc-player', 'kdarcel.vlc-player.tpl']);
Now you can call the directive in your code
<vlcplayer vlc-url="" vlc-filename="" vlc-autoplay="true"></vlcplayer>
You may have some problems with the VLC Web Plugin. Feel free to create a new ticket on the VLC Bugtracker, they are reactive and like this you can help to improve the plugin ! More reports it is, more stable will be the plugin ! You can also contribute on the projet, here the git repository
angular-vlc is freely distributable under the terms of the MIT license.