vlc介紹
VLC 是一款自由、開源的跨平臺多媒體播放器及框架，可播放大多數多媒體文件，以及 DVD、音頻 CD、VCD 及各類流媒體協議。
點擊官網查看更為詳細介紹

1.安裝vlc
根據自己電腦系統(tǒng)類型安裝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) { // Microsoftvlc.attachEvent (event, handler);} else if (vlc.addEventListener) { // Mozilla: DOM level 2vlc.removeEventListener (event, handle_MediaPlayerNothingSpecial, true);} else {alert('jian') // DOM level 0eval("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;}}

到此視頻連接工作已完成，后續(xù)其他一些優(yōu)化方法可查看我的關于vlc第二篇文章哦~

總結

以上是生活随笔為你收集整理的vlc连接视频(摄像头)方法步骤(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。