VLC an also be embedded in a web browser

by

The Mozilla plugin

VLC can also be embedded in a web browser !

Install the plugin

GNU/Linux Debian

You should already have the following lines in your /etc/apt/sources.list file, if you run Debian Woody:

     deb http://download.videolan.org/pub/videolan/debian woody main
     deb-src http://download.videolan.org/pub/videolan/debian woody main

VLC’s latest packaged version is always in the official Debian unstable branch. However you should still use our apt-get line if you need libdvdcss in its latest version:

     deb http://download.videolan.org/pub/videolan/debian sid main
     deb-src http://download.videolan.org/pub/videolan/debian sid main

Install the mozilla-plugin-vlc package:

# apt-get update
# apt-get install mozilla-plugin-vlc

Windows

Quit Firefox or Mozilla

Copy the two files in VLC_Installation_folder\mozilla (usually C:\Program Files\VideoLAN\VLC\mozilla) to your mozilla plugins directory (Usually C:\Program Files\Mozilla\plugins or C:\Program Files\Mozilla Firefox\plugins).

Restart Firefox or Mozilla

MacOS X

The Mozilla/Safari plugin for MacOS X is only available from vlc version 0.8.5.1 and onwards.

Quit Safari browser

Download the Mozilla/safari plugin package from MacOS X download page.

Run the installer from the dmg image.

Compile the sources yourself

Please look at the developers page for information on how to do this.

Use the plugin

If you open a link to a video file handled by the VLC plugin (To get the list of handled types, browse to about:plugins) or a page with an embedded video, the plugin should open and read the video.

Build HTML pages that use the plugin (version <= 0.8.5)

The following API description is only valid uptill version 0.8.5 of the mozilla plugin.

Additionally to viewing video on all pages, you can build custom pages that will use the advanced features of the plugin, using Javascript functions to control playback or extract information from the plugin.

The vlc plugin supports the following function calls:

  • play() : Start playing media in the plugin.
  • pause() : Pause playback.
  • stop() : Stop media playback.
  • fullscreen() : Switch the video to full screen.
  • set_volume(vol) : Set the volume. vol has to be an int in the 0-200 range.
  • get_volume() : Get the current volume setting.
  • mute() : Toggle volume muting.
  • set_int_variable(var_name, value) :
  • set_bool_variable(var_name, value) :
  • set_str_variable(var_name, value) :
  • get_int_variable(var_name) :
  • get_bool_variable(var_name) :
  • get_str_variable(var_name) :
  • clear_playlist() : Clear the playlist.
  • add_item(mrl) : Append an item whose location is given by the Media Resource Locator to the playlist.
  • next()
  • previous()
  • isplaying() : return true if the plugin is playing something.
  • get_length() : Get the media’s length in seconds.
  • get_position() : Get the current position in the media in percent.
  • get_time() : Get the current position in the media in seconds.
  • seek(seconds,is_relative) : If is_relative is true, seek relatively to current time, else seek from beginning of the stream. Seek time is specified in seconds.

Here are a few examples of HTML pages that use the Mozilla plugin.

Example 1

In this example, the plugin will read an HTTP stream inside the web page. If the user goes fullscreen, he will have to press f to go back in normal view.

<html>
<head><title>Demo of VLC mozilla plugin</title></head>

<body>

<h1>Demo of VLC mozilla plugin - Example 1</h1>

<embed type="application/x-vlc-plugin"
         name="video1"
         autoplay="no" loop="yes" width="400" height="300"
         target="http://server.example.org/video1.vob" />
<br />
  <a href="javascript:;" onclick='document.video1.play()'>Play video1</a>
  <a href="javascript:;" onclick='document.video1.pause()'>Pause video1</a>
  <a href="javascript:;" onclick='document.video1.stop()'>Stop video1</a>
  <a href="javascript:;" onclick='document.video1.fullscreen()'>Fullscreen</a>

</body>
</html>

Example 2

In this example, the plugin will read a multicast RTP/UDP stream in a dedicated video output window.

<html>
<head><title>Demo of VLC mozilla plugin</title></head>

<body>

<h1>Demo of VLC mozilla plugin - Example 2</h1>

<embed type="application/x-vlc-plugin"
         name="video2"
         autoplay="no" loop="no" hidden="yes"
         target="rtp://@239.255.12.42" />
<br />
  <a href="javascript:;" onclick='document.video2.play()'>Play video2</a>
  <a href="javascript:;" onclick='document.video2.stop()'>Stop video2</a>
  <a href="javascript:;" onclick='document.video2.fullscreen()'>Fullscreen</a>

</body>
</html>

Build HTML pages that use the plugin (version > 0.8.5.1)

Additionally to viewing video on all pages, you can build custom pages that will use the advanced features of the plugin, using Javascript functions to control playback or extract information from the plugin.

The vlc plugin exports serveral objects that can be accessed for setting and getting information. When used improperly the API’s will throw an exception that includes a string that explains what happened. For example when asking for vlc.input.length when there is no playlist item playing.

The vlc plugin knows the following objects:

  • audio : Access audio properties.
  • input : Access input properties.
  • playlist : Access playlist properties.
  • video : Access video properties.
  • log : Access log properties.
  • messages : Access to log message properties.
  • iterator : Access to log iterator properties.

The following JavaScript code shows howto get a reference to the vlc plugin. This reference can then be used to access the objects of the vlc plugin.

<html>
<title>VLC Mozilla plugin test page</title>
<body>
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2"
    width="640"
    height="480"
    id="vlc">
</embed>
<script language="Javascript">
<!--
var vlc = document.getElementById("vlc");
vlc.audio.toggleMute();
!-->
</script>
</body>
</html>

Root object

readonly properties

  • VersionInfo : returns version information string

read/write properties

  • none

methods

  • vlc.versionInfo() : returns version information string

Audio object

readonly properties

  • none

read/write properties

  • vlc.audio.mute : boolean value to mute and ummute the audio
  • vlc.audio.volume : a value between [0-200] which indicates a percentage of the volume.
  • vlc.audio.track : a value between [0-65535] which indicates the audio track to play or that is playing. (supported in vlc version > 0.8.6)
  • vlc.audio.channel : an integer between 1 and 5 that indicates which audio channel mode is used, values can be: « 1=stereo », « 2=reverse stereo », « 3=left », « 4=right », « 5=dolby ». Use vlc.audio.channel to check if setting of the new audio channel has succeeded. (supported in vlc version > 0.8.6)
Audio Channel:
<SELECT readonly onChange='doAudioChannel(this.value)'>
   <OPTION value=1>Stereo</OPTION'>
   <OPTION value=2>Reverse stereo</OPTION'>
   <OPTION value=3>Left</OPTION'>
   <OPTION value=4>Right</OPTION'>
   <OPTION value=5>Dolby</OPTION'>
</SELECT'>
<SCRIPT language="javascript"'>
<!--
function doAudioChannel(value)
{
   var vlc = getVLC("vlc");
   vlc.audio.channel = parseInt(value);
   alert(vlc.audio.channel);
};
--'>

methods

  • vlc.audio.toggleMute() : boolean toggle that mutes and unmutes the audio based upon the previous state

Input object

readonly properties

  • vlc.input.length : length of the input file in number of milliseconds
  • vlc.input.fps : frames per second returned as a float
  • vlc.input.hasVout : a boolean that returns true when the video is being displayed, it returns false when video is not displayed

read/write properties

  • vlc.input.position : normalized position in multimedia stream item given as a float value between [0.0 – 1.0]
  • vlc.input.time : the absolute position in time given in milliseconds, this property can be used to seek through the stream
    <!-- absolute seek in stream !-->
    vlc.input.time = <absolute seek>
    <!-- relative seek in stream !-->
    vlc.input.time = vlc.input.time + <relative seek>
  • vlc.input.state : current state of the input chain given as enumeration (IDLE/CLOSE=0, OPENING=1, BUFFERING=2, PLAYING=3, PAUSED=4, STOPPING=5, ERROR=6)
  • vlc.input.rate : input speed given as float (1.0 for normal speed, 0.5 for half speed, 2.0 for twice as fast, etc.)

methods

  • none

Playlist object

readonly properties

  • vlc.playlist.itemCount : number that returns the amount of items currently in the playlist
  • vlc.playlist.isPlaying : a boolean that returns true if the current playlist item is playing and false when it is not playing

read/write properties

  • none

methods

  • vlc.playlist.add(mrl) : add a playlist item as MRL (Multimedia Resource Locator). The MRL must be given as a string.
  • vlc.playlist.add(mrl,name,options) : add a playlist item as MRL (Multimedia Resource Locator), with metaname ‘name’ and options ‘options’. All input values must be given as string.
  • vlc.playlist.play() : start playing the current playlist item
  • vlc.playlist.togglePause() : toggle the pause state for the current playlist item
  • vlc.playlist.stop() : stop playing the current playlist item
  • vlc.playlist.next() : iterate to the next playlist item
  • vlc.playlist.prev() : iterate to the previous playlist item
  • vlc.playlist.clear() : empty the current playlist, all items will be deleted from the playlist
  • vlc.playlist.removeItem(number) : remove the given item number (which cannot be greater then vlc.playlist.itemCount)

Video object

readonly properties

  • vlc.video.width : returns the horizontal size of the video
  • vlc.video.height : returns the vertical size of the video

read/write properties

  • vlc.video.fullscreen : when set to true the video will be displayed in fullscreen mode, when set to false the video will be shown inside the video output size. The property takes a boolean as input.
  • vlc.video.aspectRatio : get and set the aspect ratio to use in the video screen. The property takes a string as input value. Valid values are: « 1:1″, « 4:3″, « 16:9″, « 16:10″, « 221:100″ and « 5:4″

methods

  • vlc.video.toggleFullscreen() : toggle the fullscreen mode based on the previous setting

Log object

readonly properties

  • vlc.log.messages : returns a messages object

read/write properties

  • vlc.log.verbosity : write number [-1,0,1,2,3] for changing the verbosity level of the log messages. The numbers have the following meaning: -1 disable, 0 info, 1 error, 2 warning, 3 debug.

methods

  • none

Messages object

readonly properties

  • messages.count : returns number of messages in the log
  • messages.severity : number that indicates the severity of the log message (0 = info, 1 = error, 2 = warning, 3 = debug)
  • message.name : name of VLC module that printed the log message (e.g: main, http, directx, etc…)
  • message.type : type of VLC module that printed the log message (eg: input, access, vout, sout, etc…)
  • message.message : the message text

read/write properties

  • none

methods

  • messages.clear() : clear the current log buffer. It should be called as frequently as possible to not overflow the plugins logging buffer. Call this method after the log messages of interest are read.
  • messages.iterator() : returns a messages iterator object, which is used to iterate over the messages in the log. Don’t clear the log buffer while holding an iterator object.

Iterator object

readonly properties

  • iterator.hasNext : returns a boolean that indicates when true, that wheter vlc.log.messages.next() returns the next message.

read/write properties

  • none

methods

  • iterator.next() : returns the next message object it the log
About these ads

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s


Suivre

Recevez les nouvelles publications par mail.

%d blogueurs aiment cette page :