文章首页 Web开发 Windows开发 编程语言 数据库技术 移动平台 系统服务 微信 设计 布布扣 其他

vlc 网页插件的 使用与控制 API http://www.xuebuyuan.com/2224602.html

时间：2015-11-26 18:41:12   收藏：0   阅读：1060

不知道vlc 是什么的请百度一下。、

vlc 提供了ie浏览器的activeX插件和火狐或者chrome的插件，基本上覆盖了所有浏览器，所以有复杂解码需求的情况下用vlc来解决网页播放视频，也是一种没办法的办法。

下面开始使用教程：

html文档结构：

 <object class="vlc" type=‘application/x-vlc-plugin‘  events=‘True‘ width="720" height="540">
        <param name=‘mrl‘ value=‘‘ />
        <param name=‘volume‘ value=‘50‘ />
        <param name=‘autoplay‘ value=‘true‘ />
        <param name=‘loop‘ value=‘false‘ />
        <param name=‘fullscreen‘ value=‘false‘ />
    </object>
	
	 
   <object class="vlc" type=‘application/x-vlc-plugin‘  events=‘True‘ width="720" height="540" classid=‘clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921‘>
          <param name=‘mrl‘ value=‘‘ />
          <param name=‘volume‘ value=‘50‘ />
          <param name=‘autoplay‘ value=‘true‘ />
          <param name=‘loop‘ value=‘false‘ />
          <param name=‘fullscreen‘ value=‘false‘ />
    </object>

上面的object 在其他浏览器中有效，下面的object在ie下面有效；

可以使用js判断浏览器类型来动态插入object对象：

	function showPlayer(id,url){  
    var vhtml = ‘<object id="vlc"‘;  
    var userAg = navigator.userAgent;  
    if(-1 != userAg.indexOf("MSIE")){  
        vhtml+=‘ classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"‘;  
    }  
    else if(-1 != userAg.indexOf("Firefox") || -1 != userAg.indexOf("Chrome") || -1 != userAg.indexOf("Opera") || -1 != userAg.indexOf("Safari")){  
        vhtml+=‘ type="application/x-vlc-plugin"‘;  
    }  
    vhtml+=‘ width="700" height="400">‘;  
  
  
    //下面这些播放器的参数自己配置吧  
    vhtml+="<param name=‘mrl‘ value=‘‘ />";
    vhtml+="<param name=‘autoplay‘ value=‘true‘ />"; 
	vhtml+=" <param name=‘volume‘ value=‘50‘ />"; 
	vhtml+=" <param name=‘loop‘ value=‘false‘ />"; 
	vhtml+="<param name=‘fullscreen‘ value=‘false‘ />"; 
	vhtml+=‘</object>‘;  
    document.getElementById(id).innerHTML = vhtml;  
}

简单的控制：

function play(elem)
	{
		var vlc=document.getElementById(‘vlc‘);
		vlc.playlist.clear();
		vlc.playlist.add(elem.href);
		vlc.playlist.play();
		
		
	}

下面是判断插件的安装状态：

	
	function isInsalledIEVLC(){ 
        
        var vlcObj = null;
        var vlcInstalled= false;
        
        try {
            vlcObj = new ActiveXObject("VideoLAN.Vlcplugin.2"); 
            if( vlcObj != null ){ 
                vlcInstalled = true 
            }
        } catch (e) {
            vlcInstalled= false;
        }        
        return vlcInstalled;
    } 
	
	function isInsalledFFVLC(){
         var numPlugins=navigator.plugins.length;
         for  (i=0;i<numPlugins;i++)
         {
              plugin=navigator.plugins[i];
              if(plugin.name.indexOf("VideoLAN") > -1 || plugin.name.indexOf("VLC") > -1)
            {            
                 return true;
            }
         }
         return false;
    }

以上分别是两种插件的安装情况；

最后献上vlc最全的api：

Embed tag attributes

To embed the plugin into a webpage use the following <embed> template:

<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" />

<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab"></object>

Required elements

These are required attributes for the <embed> tag:

Optionnal elements

These are additional attributes for the <embed> tag:

Normal DOM elements

Javascript API description

The vlc plugin exports several 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.

VLC objects

The vlc plugin knows the following objects:

The following are deprecated:

Example

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"
 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

read/write properties

methods

events

Example

The following code snippit provides easy functions to register and unregister event callbacks on all supported platforms (currently only Linux mozilla based browsers and windows activeX objects for Internet Explorer).

<SCRIPT language="javascript">
<!--
function registerVLCEvent(event, handler)
{
var vlc = getVLC("vlc");
if (vlc) {
    if (vlc.attachEvent) {
        // Microsoft
        vlc.attachEvent (event, handler);
    } else if (vlc.addEventListener) {
        // Mozilla: DOM level 2
        vlc.addEventListener (event, handler, false);
    } else {
        // DOM level 0
        vlc["on" + event] = handler;
    }
}
}
// stop listening to event
function unregisterVLCEvent(event, handler)
{
var vlc = getVLC("vlc");
if (vlc) {
    if (vlc.detachEvent) {
        // Microsoft
        vlc.detachEvent (event, handler);
    } else if (vlc.removeEventListener) {
        // Mozilla: DOM level 2
        vlc.removeEventListener (event, handler, false);
    } else {
        // DOM level 0
        vlc["on" + event] = null;
    }
}
}
// event callback function for testing
function handleEvents(event)
{
if (!event)
    event = window.event; // IE
if (event.target) {
    // Netscape based browser
    targ = event.target;
} else if (event.srcElement) {
    // ActiveX
    targ = event.srcElement;
} else {
    // No event object, just the value
    alert("Event value" + event );
    return;
}
if (targ.nodeType == 3) // defeat Safari bug
    targ = targ.parentNode;
alert("Event " + event.type + " has fired from " + targ );
}
// handle mouse grab event from video filter
function handleMouseGrab(event,X,Y)
{
if (!event)
    event = window.event; // IE
alert("new position (" + X + "," + Y + ")");
}
// Register a bunch of callbacks.
registerVLCEvent(‘MediaPlayerNothingSpecial‘, handleEvents);
registerVLCEvent(‘MediaPlayerOpening‘, handleEvents);
registerVLCEvent(‘MediaPlayerBuffering‘, handleEvents);
registerVLCEvent(‘MediaPlayerPlaying‘, handleEvents);
registerVLCEvent(‘MediaPlayerPaused‘, handleEvents);
registerVLCEvent(‘MediaPlayerForward‘, handleEvents);
registerVLCEvent(‘MediaPlayerBackward‘, handleEvents);
registerVLCEvent(‘MediaPlayerEncounteredError‘, handleEvents);
registerVLCEvent(‘MediaPlayerEndReached‘, handleEvents);
registerVLCEvent(‘MediaPlayerTimeChanged‘, handleEvents);
registerVLCEvent(‘MediaPlayerPositionChanged‘, handleEvents);
registerVLCEvent(‘MediaPlayerSeekableChanged‘, handleEvents);
registerVLCEvent(‘MediaPlayerPausableChanged‘, handleEvents);
</script>
-->

Audio object

readonly properties

read/write properties

methods

Example

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);
};
-->

Input object

readonly properties

read/write properties

<!-- absolute seek in stream !-->
vlc.input.time = <absolute seek>
<!-- relative seek in stream !-->
vlc.input.time = vlc.input.time + <relative seek>

rate > 1              : is fastforward
rate > 0 and rate < 1 : is slow motion
rate < 0              : is rewind

methods

Playlist object

readonly properties

read/write properties

methods

 var options = new Array(":aspect-ratio=4:3", "--rtsp-tcp");
var id = vlc.playlist.add("rtsp://servername/item/to/play", "fancy name", options);
vlc.playlist.playItem(id);

Playlist items object

readonly properties

read/write properties

methods

Subtitle object

readonly properties

read/write properties

methods

Video object

readonly properties

read/write properties

methods

Deinterlace Object

readonly properties

read/write properties

methods

Marquee Object

readonly properties

read/write properties

methods

Some problems may happen (option like color or text will not be applied) because of the VLC asynchronous functioning. To avoid it, after enabling marquee, you have to wait a little time before changing an option. But it should be fixed by the new vout implementation.

NOTE: [1]

Logo Object

readonly properties

read/write properties

methods

Some problems may happen because of the VLC asynchronous functioning. To avoid it, after enabling logo video filter, you have to wait a little time before changing an option. But it should be fixed by the new vout implementation.

MediaDescription Object

readonly properties

read/write properties

methods

DEPRECATED APIs

DEPRECATED: Log object

CAUTION: For security concern, VLC 1.0.0-rc1 is the latest (near-to-stable) version in which this object and its children are supported.

This object allows accessing VLC main message logging queue. Typically this queue capacity is very small (no nore than 256 entries) and can easily overflow, therefore messages should be read and cleared as often as possible.

readonly properties

read/write properties

methods

DEPRECATED: Messages object

CAUTION: For security concern, VLC 1.0.0-rc1 is the latest (near-to-stable) version in which this object and its children are supported.

readonly properties

read/write properties

methods

DEPRECATED: Messages Iterator
object

CAUTION: For security concern, VLC 1.0.0-rc1 is the latest (near-to-stable) version in which this object and its children are supported.

readonly properties

read/write properties

methods

DEPRECATED: Message subobject

CAUTION: For security concern, VLC 1.0.0-rc1 is the latest (near-to-stable) version in which this object and its children are supported.

Build
HTML pages that use the plugin (VLC version up to 0.8.5)

WARNING: the APIs described in this section are deprecated, do not use. They no longer work on recent VLC version (> 0.8.5), either it being the ActiveX (Internet Explorer)/ Safari or Mozilla based browsers.

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:


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 or double-click on the video 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 UDP/RTP 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:5004" />
<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>

原文：http://www.cnblogs.com/caicaizi/p/4998506.html

评论（0）
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣，分享程序人生！