整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          網(wǎng)頁WEB集成IP視頻監(jiān)控不是夢,0基礎(chǔ)不懂編程?你也可以做到

          時的工作中常會遇到一些系統(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軟件下載

          登錄VLC官網(wǎng) https://www.videolan.org/,選擇windows(32位)版本下載。

          下載VLC軟件

          VLC軟件安裝(務(wù)必勾選插件)

          運(yùn)行安裝文件

          選擇軟件安裝位置

          一定記得要勾選網(wǎng)頁瀏覽器插件

          完成安裝

          網(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>

          代碼編輯截圖

          海康威視RTSP調(diào)用格式


          具體請參看海康專業(yè)文檔

          瀏覽器測試

          先用Google Chrome瀏覽器測試,提示插件不支持。

          Chrome瀏覽器提示插件不受支持

          用微軟IE測試,需要安裝插件。

          IE瀏覽器提示要安裝ActiveX插件

          確認(rèn)安裝插件

          瀏覽器只顯示了第一個畫面。

          IE瀏覽器顯示不完整

          用編輯器測試,2種內(nèi)核都能正常顯示。

          編輯器里測試效果

          改用360瀏覽器,呈現(xiàn)2X2的畫面,實(shí)現(xiàn)最終的顯示效果。

          360瀏覽器顯示的最終效果圖

          結(jié)語

          本文參考了一些專業(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)頁中如何插入音頻和視頻?


          主站蜘蛛池模板: 无码精品视频一区二区三区| 好看的电影网站亚洲一区| 国产免费一区二区三区免费视频| 亚洲无线码一区二区三区| 国产精品亚洲一区二区三区在线观看 | 日韩一区二区三区精品| 51视频国产精品一区二区| 久久婷婷久久一区二区三区| 国产精品第一区第27页| 日本v片免费一区二区三区 | 色综合一区二区三区| 日韩欧美一区二区三区免费观看| 日韩电影一区二区三区| 另类一区二区三区| 国产亚洲情侣一区二区无| 国产精品免费大片一区二区| 精品人妻一区二区三区四区在线| 国产精品成人免费一区二区 | 一区二区精品在线观看| 日本免费精品一区二区三区| 精品一区二区三区在线观看l| 日韩人妻一区二区三区蜜桃视频| 亚洲人成人一区二区三区| 国语精品一区二区三区| 亚洲国产精品一区二区成人片国内| 亚洲国产综合无码一区二区二三区 | 精品国产一区二区三区免费| 国产一在线精品一区在线观看| 国产婷婷一区二区三区| 伊人色综合一区二区三区| 伊人色综合一区二区三区| 午夜福利av无码一区二区| 精品人妻中文av一区二区三区| 亚洲国产成人久久综合一区| 国产精品第一区揄拍| 好吊妞视频一区二区| 精品久久久久中文字幕一区| 精品少妇一区二区三区视频| 亚洲一区二区三区无码国产| 国产香蕉一区二区三区在线视频| 波多野结衣中文字幕一区|