New kind of mozilla vlc plugin

When implementing one of the projects, I ran into a small task, namely, embedding a vlc player on a website page while the player must support the ability to style and play the commercial before playing the main media file or stream.
Since it was previously possible to embed vlc on the site page (playback from cameras), I immediately went to the wiki page of the vlc project. Detailed study, which showed that it is realizable by standard methods, but no ready-made solutions are presented. Remembering that "laziness is the engine of progress" went to google to look for options for embedding the player. Having spent several hours, I came to the conclusion that there are very few existing implementations and most of them originate from the VLCcontrols plugin developed by Julien Bouquillon. One problem - this plugin was last updated in 2010.

Well, since there are no ready-made solutions, then we will write our own wrapper for the plugin. Having made stocks of notes, coffee and cigarettes, sat down to study the found plug and drawing up a work plan.

What needed to be done

• Develop a player interface with the ability to easily change it.
• Implement the basic functions of the player (play, stop, pause, adjust the sound, full-screen mode).
• Write a feature that allows you to show ads that would not be blocked by AdBlock.
• Implement support for additional methods that are supported by the mozilla vlc plugin.
• Simplify integration to the page.
• Support various browsers.

Having finished the preparatory work, at first I decided to redo the VLCcontrols plugin. The fact that I was deeply mistaken in the choice, it dawned on me after the alteration. Some functions did not work the way I needed, but others generally stopped working with seemingly ordinary actions. Well, okay, they learn from mistakes, I will write everything from scratch.
Said and done, the first version was written faster than the plugin was remade. Then there were more versions in which other functions were added, but the already implemented ones were broken. In the end, a stable version appeared with support for most of the vlc plugina functionality, the customer accepted the work, but added more to implement additional functions.
')

What is implemented in this wrapper?

• Automatic playback immediately after loading the plugin.
• Demonstration of a commercial with the ability to customize the time of the demonstration (AdBlock does not block)
• Ability to change the player by changing the css file.
• Support all the basic functions of the player
• Changing the aspect ratio, interlacing, audio channels
• 2 types of full-screen mode (standard and via HTML5 Fullscreen API)
• Enable the mode in which the player may impose various effects of css
• Play a video file from a cookie or from a specified parameter

It all works very simply.

We connect the script to the site and simply call the player, passing it the parameters:

hPlayer.init(); 

I will give the main list of parameters that the wrapper perceives:

 wrapper —  id DOM ,     . * ID  —      DOM . * NULL(  ) —       (id=»hPlayer»). mode —         . * http —  vlc . * NULL(  ) —     . stream —   ,     . * ' ' —            . * NULL(  ) —     . windowless * true —     .       CSS.   .          Fullscreen API. * NULL(  ) —     (  «false»). ad_state * true —        . * NULL(  ) —     (  «false»). ad_link * 'http://site.com/adsvideo.avi' —         ad_state. * NULL(  ) —     (  «»). ad_time * '  ' —     . * NULL(  ) —     (  «10000 /10 »). 

Examples

Normal start with passing parameters.

 hPlayer.init({ wrapper: 'hPlayer', autoplay: true, loop: true, windowless: true, stream: 'http://site.com.ua/mainvideo.avi', mode: 'http' }); 

Play advertising before playing the main file.

 hPlayer.init({ wrapper: 'hPlayer', stream: 'http://site.com.ua/mainvideo.avi', autoplay: true, loop: true, mode: 'http', ad_state:true, ad_link: 'http://site.com.ua/videofile.flv', ad_time: 10000 }); 

You can pick up and use it on github: github.com/zpvs/hplayer

Demo || All keys to run

In developing the materials used:
Julien Bouquillon VLCcontrols Plugin
Documentation with VideoLAN wiki

UPD

On the vlc forum, after posting, I received such an interesting message from Jean-Baptiste Kempf

OMG thanks a LOT.

Can we use this webplugin?