火狐浏览器 谷歌浏览器 安装vlc插件 播放摄像头 rtsp视频流

做物联网项目，需要在对应工厂里加 摄像头rtsp视频流 的配置，就找了很多资料和方法。最终，可以啦。。。。。

1. 搜索 - 下载VLC Media Player

2. 安装，并勾选Mozila支持；

参考文档：

http://www.bubuko.com/infodetail-1172183.html

http://blog.csdn.net/ljh081231/article/details/25616499

谷歌浏览器下载：http://www.portablesoft.org/google-chrome-legacy-versions/

在这里面，可以选择下载一个 谷歌浏览器的安装包，建议下载一个 低版本 32位的绿色版。然后将本地的谷歌浏览器卸载，删除所有记录。

安装完 vlc插件后，就可以打开下载的谷歌安装包，运行。它会提示

//视频流div 获取宽度,如果一个id对应多个rtsp视频流，可以保证在一行显示，出现滚动条        $scope.fn_div_vlc_width = function(){            var oNum = document.getElementsByTagName('object');            var oDiv_vlc_width = document.getElementById('div_vlc_width');            oDiv_vlc_width.style.width = oNum.length * 418 +'px';        };        $scope.fn_vlc_width = function(){            var oDiv_vlc_width = document.getElementById('div_vlc_width');            var append_str = [];            var arr_div_vlc_width = [                { name:'rtsp://admin:admin123@192.168.40.3' },                { name:'rtsp://admin:admin123@192.168.40.4' },                { name:'rtsp://admin:admin123@192.168.40.6' }            ];            for(var i= 0,len=arr_div_vlc_width.length;i<len;i++){                var str =                    ['<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" ',                        'codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" ',                        'id="vlc" name="vlc" class="vlcPlayer" events="True" > ',                        '<param name="wmode" value="transparent"> ',                        '<param name="quality" value="high"> ',                        '<param name="Src" value="'+ arr_div_vlc_width[i].name +'" /> ',                        '<param name="ShowDisplay" value="True" /> ',                        '<param name="AutoLoop" value="False" /> ',                        '<param name="AutoPlay" value="True" /> ',                        '<embed id="vlcEmb" wmode="transparent" type="application/x-google-vlc-plugin" ',                        'version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" ',                        'width="410" height="250" target="'+ arr_div_vlc_width[i].name +'" quality="high"> ',                        '</embed></object>'].join(' ');                append_str.push(str);            }            angular.element(oDiv_vlc_width).append( append_str.join(' ') );            $scope.fn_div_vlc_width();        };        $scope.fn_vlc_width();        /*        摄像头的显示隐藏类，不用ng-show，        因为ng-show会会添加display:none导致,分区重绘，视频流的重新加载。        所以，用height:0；overflow:hiden; 的方式，        刚开始高度为0，覆盖住视频流的div，让其加载。提高用户体验，带用户使用时点击展开 。         */        $scope.show_div_vlc = false;        $scope.fn_show_div_vlc = function(){            var div_vlc_show = document.getElementById('div_vlc_show');            if(angular.element(div_vlc_show).hasClass('div_vlc_Hide')){                angular.element(div_vlc_show).removeClass('div_vlc_Hide');            }else{                angular.element(div_vlc_show).addClass('div_vlc_Hide');            }            $scope.show_div_vlc = !$scope.show_div_vlc;        };