整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
時的工作中常會遇到一些系統(tǒng)集成的需求，需要在軟件平臺集成視頻監(jiān)控系統(tǒng)。而軟件開發(fā)者往往不懂安防弱電系統(tǒng)，不知道如何在自己的軟件界面中集成一些監(jiān)控的實(shí)時畫面。而監(jiān)控廠家提供的SDK比較復(fù)雜，很難在短時間完成集成的任務(wù)。最終導(dǎo)致軟件平臺的一些功能無法實(shí)現(xiàn)，影響項(xiàng)目的質(zhì)量。
本文提供的方法主要基于VLC播放器的ActiveX插件，通過這個插件，在網(wǎng)頁中調(diào)用攝像機(jī)的RTSP流，實(shí)現(xiàn)圖像的實(shí)時預(yù)覽，音頻的監(jiān)聽等等功能。文章以海康的IP網(wǎng)絡(luò)攝像機(jī)為例給出具體的調(diào)用方法，供大家學(xué)習(xí)參照。
登錄VLC官網(wǎng) https://www.videolan.org/，選擇windows（32位）版本下載。
下載VLC軟件
運(yùn)行安裝文件
選擇軟件安裝位置
一定記得要勾選網(wǎng)頁瀏覽器插件
完成安裝
可選用記事本（notepad）或?qū)I(yè)的編輯器，輸入如下代碼，保存為html網(wǎng)頁文件。
<html>
<body>
<title>TESTVDEIO-1-TEST</title>
<head>
<table>
<tbody>
<caption>視頻監(jiān)控演示</caption>
<tr>
<td>
<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
<param name='mrl' value='rtsp://admin:q66668888@172.16.200.88:554/h264/ch1/main/av_stream' />
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name='fullscreen' value='false' />
<param name='controls' value='false' />
</td>
<td>
<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
<param name='mrl' value='rtsp://admin:q66668888@172.16.200.89:554/h264/ch1/main/av_stream' />
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name='fullscreen' value='false' />
<param name='controls' value='false' />
</td>
</tr>
<tr>
<td>
<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
<param name='mrl' value='rtsp://admin:q66668888@172.16.200.89:554/h264/ch1/main/av_stream' />
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name='fullscreen' value='false' />
<param name='controls' value='false' />
</td>
<td>
<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
<param name='mrl' value='rtsp://admin:q66668888@172.16.200.88:554/h264/ch1/main/av_stream' />
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name='fullscreen' value='false' />
<param name='controls' value='false' />
</td>
</tr>
</tbody>
</table>
</object>
</body>
</html>代碼編輯截圖
具體請參看海康專業(yè)文檔
先用Google Chrome瀏覽器測試，提示插件不支持。
Chrome瀏覽器提示插件不受支持
用微軟IE測試，需要安裝插件。
IE瀏覽器提示要安裝ActiveX插件
確認(rèn)安裝插件
瀏覽器只顯示了第一個畫面。
IE瀏覽器顯示不完整
用編輯器測試，2種內(nèi)核都能正常顯示。
編輯器里測試效果
改用360瀏覽器，呈現(xiàn)2X2的畫面，實(shí)現(xiàn)最終的顯示效果。
360瀏覽器顯示的最終效果圖
本文參考了一些專業(yè)文章，就不一 一列出了，在這一并謝過！
由于本人水平有限，有不對的地方敬請指正。文章旨在拋磚引玉，通過討論，相互學(xué)習(xí)，共同進(jìn)步。
我是WoNew弱電蝸牛，一名從業(yè)多年的弱電工程師，在頭條傳播弱電專業(yè)知識和行業(yè)信息，分享工作中的經(jīng)驗(yàn)和心得。
喜歡我的文章或視頻，歡迎點(diǎn)贊和轉(zhuǎn)發(fā)。有疑問或建議，也歡迎留言，我會盡力解答。
端功能問題系列文章，點(diǎn)擊上方合集↑
序言
大家好，我是大澈！
本文約2100+字，整篇閱讀大約需要3分鐘。
本文主要內(nèi)容分三部分，如果您只需要解決問題，請閱讀第一、二部分即可。如果您有更多時間，進(jìn)一步學(xué)習(xí)問題相關(guān)知識點(diǎn)，請閱讀至第三部分。
感謝關(guān)注微信公眾號：“程序員大澈”，然后加入問答群，從此讓解決問題的你不再孤單！
網(wǎng)頁中常見的多媒體文件包括音頻文件和視頻文件，對于在線音頻和視頻，我們往往都是使用embed標(biāo)簽來插入。embed語法：
1 <embed src="”視頻地址”" type="”audio/x-pn-realaudio-plugin”"
2 console="”Clip1〃" controls="”ControlPanel,StatusBar”" height="”330〃"
3 width="”450〃" autostart="”true”" title="undefined">
<embed src="要播放的文件網(wǎng)址" ;="" autostart="true" loop="true" width="400"
height="350">
html中網(wǎng)頁中如何插入音頻和視頻？
舉例1：插入音頻文件
1 <title>插入音頻文件</title>
2
3
4 <embed src="media/西班牙舞曲.mp3" width="400px" height="80px">
在瀏覽器預(yù)覽效果如下：
說明：
我們可以看到，使用embed標(biāo)簽插入音頻文件還會有一個播放界面，界面上有幾個簡單的功能按鈕。
舉例2：插入視頻文件
1 <title>插入音頻文件</title>
2
3
4 <embed src="media/小蘋果.wmv" width="400px" height="80px">
在瀏覽器預(yù)覽效果如下：
注意：
由于音頻和視頻文件比較大，所以在這里我們就不提供大家在線測試的功能。不過大家可以在自己計(jì)算機(jī)上面測試一下代碼。
使用embed標(biāo)簽插入視頻，在瀏覽器我們也可以看到，瀏覽器提供了一個簡單的操作界面。embed標(biāo)簽支持的視頻格式很多，大部分主流格式都支持。
embed標(biāo)簽?zāi)苤С执蟛糠指袷降囊曨l文件，反正主流的如.mp4、.avi、.rmvb等都支持。如果你使用embed標(biāo)簽不能播放視頻，那就可能是你視頻格式有問題或者編碼有問題。你可以用格式工廠轉(zhuǎn)換一下格式。
以上就是html中網(wǎng)頁中如何插入音頻和視頻？
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
