vlc连接视频(摄像头)方法步骤(一)

vlc介绍
VLC 是一款自由、开源的跨平台多媒体播放器及框架，可播放大多数多媒体文件，以及 DVD、音频 CD、VCD 及各类流媒体协议。
点击官网查看更为详细介绍

1.安装vlc
根据自己电脑系统类型安装win64 或者 win32 位的vlc版本
可以官网下载，或者可直接获取 win32位
链接：https://pan.baidu.com/s/1ZgpTQTxqdfgvl2IV3R7XNw
提取码：bods
一些报错，比如：vlc.playlist.items.clear(); 报items错，或者vlc.playlist为空，就是因为没有安装插件所致

2. 安装成功后，编写代码
注意：只能在ie浏览器下测试连接实时摄像头（海康摄像头），其他视频可在其他浏览器测试

<object  style="width: 500px;height: 500px;background: #000"
        type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
        id="vlcId" name="vlc" events="True" width="100%" height="100%">
    <param name="mrl"  value=""/>
    <param name="autoplay" value="false"/>
    <param name="toolbar" value="false"/>
    <param name="bgcolor" value="#000000"/>
    <param name="branding" value="false"/>
    <param name="volume" value="0"/>
</object>

初始化vlc,并连接

initVlc("vlcId");
//rtspUrl：视频地址; vlc的Id; width; height
goToUrl(rtspUrl, "vlcId",500 , 500);
//重新resize
resizeRtsp(500,500);

function initVlc (nameId) {
   if( navigator.appName.indexOf("Microsoft Internet")==-1 ) {
         onVLCPluginReady(nameId)
     } else if( document.readyState == 'complete' ) {
         onVLCPluginReady(nameId);
     }
     else {
         document.onreadystatechange=function() {
             if( document.readyState == 'complete' ) {
                 onVLCPluginReady(nameId);
             }
         }
     }
 }
 function onVLCPluginReady(nameId) {
     registerVLCEvent("MediaPlayerNothingSpecial", handle_MediaPlayerNothingSpecial, nameId);
     registerVLCEvent("MediaPlayerOpening", handle_MediaPlayerOpening , nameId);
     registerVLCEvent("MediaPlayerBuffering", handle_MediaPlayerBuffering, nameId);
     registerVLCEvent("MediaPlayerPlaying", handle_MediaPlayerPlaying, nameId);
     registerVLCEvent("MediaPlayerPaused", handle_MediaPlayerPaused, nameId);
     registerVLCEvent("MediaPlayerLengthChanged", handle_MediaPlayerLengthChanged,nameId);
 }
 function registerVLCEvent(event, handler,nameId) {
     var vlc = getVLC(nameId);
     if (vlc) {
         if (vlc.attachEvent) {
// Microsoft
             vlc.attachEvent (event, handler);
         } else if (vlc.addEventListener) {
// Mozilla: DOM level 2
             vlc.removeEventListener (event, handle_MediaPlayerNothingSpecial, true);
         } else {
             alert('jian')
// DOM level 0
             eval("vlc.on" + event + " = handler");
         }
     }
 }
  //vlc初始化以及事件
 function handle_MediaPlayerNothingSpecial() {
     console.log('handle_MediaPlayerNothingSpecial')
 }
 function handle_MediaPlayerOpening() {
     console.log('handle_MediaPlayerOpening')
 }
 //可以测试视频加载百分比
 function handle_MediaPlayerBuffering(val) {
     console.log('handle_MediaPlayerBuffering',val)
 }
 function handle_MediaPlayerPlaying() {
     console.log('handle_MediaPlayerPlaying')
 }
 function handle_MediaPlayerPaused() {alert("关闭");}
 function handle_MediaPlayerLengthChanged(val) {
     console.log('handle_MediaPlayerLengthChanged')
 }
    
function getVLC(name) {
   if (window.document[name]) {
        return window.document[name];
    }
    if (navigator.appName.indexOf("Microsoft Internet")==-1) {
        if (document.embeds && document.embeds[name])
            return document.embeds[name];
    } else {
        return document.getElementById(name);
    }
}
 function goToUrl (targetURL,targetNameId,width,height){
     var vlc = getVLC(targetNameId);
     if( vlc ) {
         vlc.playlist.items.clear();
         var options = [":rtsp-tcp"];
         //注意： 有时候宽高比不一定是整数，就会不识别，所以需要取整
         width = parseInt(width);
         height = parseInt(height);
         vlc.style.height = height + 'px';
         vlc.style.width = width  + 'px';
         vlc.setAttribute("height", height * 100 + '%');
         vlc.setAttribute("width", width * 100 + '%');
         var valueRatio = width+ ':' + height;
         if( vlc ){
             vlc.video.aspectRatio = valueRatio;
         }
         var itemId = vlc.playlist.add(targetURL,"",options);
         vlc.audio.mute = false;
         vlc.audio.volume = 0;
         options = [];
         if( itemId != -1 ) {
             vlc.playlist.playItem(itemId);
         }
         else {
             alert("cannot play at the moment !");
         }
     }
 }
 function  resizeRtsp(width,height) {
     width = parseInt(width);
     height = parseInt(height);
     var vlc = getVLC('vlcId');
     if( vlc ){
         vlc.style.height = height + 'px';
         vlc.style.width = width  + 'px';
         vlc.setAttribute("height", height * 100 + '%');
         vlc.setAttribute("width", width * 100 + '%');
         var valueRatio =  width + ':' + height;
         vlc.video.aspectRatio = valueRatio;
     }
 }

到此视频连接工作已完成，后续其他一些优化方法可查看我的关于vlc第二篇文章哦~