整合營(yíng)銷服務(wù)商

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

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

          「胖達(dá)分享」網(wǎng)頁(yè)中的圖片和html文檔的路徑

          嘍大家好,我是胖達(dá)。本期視頻來(lái)看看路徑相關(guān)的內(nèi)容。我們知道在網(wǎng)頁(yè)中存在很多的圖片,如果把這些圖片和html文檔放在一起,這樣不光不美觀,管理起來(lái)也非常不方便。通常會(huì)新建一個(gè)專門用來(lái)管理圖像資源的文件夾,當(dāng)需要查找圖像的時(shí)候就會(huì)選擇使用路徑的方式來(lái)指定圖像文件的位置。

          路徑的類型又分為兩種,第一種是相對(duì)路徑,第二種是絕對(duì)路徑。今天先來(lái)了解一下相對(duì)路徑。相對(duì)路徑是相對(duì)于當(dāng)前文件的位置來(lái)表示資源,也就是圖片位置的路徑表達(dá)方式。簡(jiǎn)單來(lái)說(shuō)就是圖片相對(duì)于當(dāng)前html文檔的位置。這里把相對(duì)路徑的分類給大家列出來(lái)了,一個(gè)一個(gè)往下看。

          ·首先是同級(jí)路徑。同級(jí)路徑不需要在html里面寫任何符號(hào),只需要將文件名寫到html屬性里就可以了。在代碼里看一下,這里有一個(gè)image,點(diǎn)jpg的圖片和html文檔處于同一級(jí),所以在html的屬性里直接寫image,點(diǎn)jpg保存一下看看效果。

          可以看到現(xiàn)在圖片是正常展示的,同級(jí)路徑下只需要在html屬性里完整填寫圖像文件的名稱就可以了。

          ·再來(lái)看第二個(gè)下級(jí)路徑。當(dāng)圖像文件位于html文件下一集時(shí),需要在html屬性里完整填寫同級(jí)文件夾的名稱,然后斜杠寫出對(duì)應(yīng)圖片文件的名稱。

          →首先打開資源文件夾,在這里新增一個(gè)images的文件夾。將image圖片文件復(fù)制一份放到images文件夾里。

          →打開vscode,新建一個(gè)gtml文檔,這里新增一個(gè)image標(biāo)簽。

          →在左側(cè)資源管理器中剛剛新增的images文件夾已經(jīng)顯示出來(lái)了,打開以后會(huì)發(fā)現(xiàn)里面有一個(gè)image,點(diǎn)jpg的圖片。把這個(gè)路徑寫一下,在src屬性里面寫入位于當(dāng)前html文件同級(jí)的images文件夾的名稱,使用符號(hào)斜杠找到image,點(diǎn)gpg,看一下效果。此時(shí)圖片也完整顯示出來(lái)了。

          →如果在amager四文件夾里還有一個(gè)amager四文件夾,下級(jí)路徑又該怎么寫?在amager文件夾里再新建一個(gè)文件夾,打開vscod,在左側(cè)的資源管理器中a major s文件夾下面又新增了一個(gè)a major s文件夾,在這里面又放了一張圖片。

          這張圖片應(yīng)該怎樣讓它展示出來(lái)?一起來(lái)看一下。

          →首先找到同級(jí)的images文件夾,使用符號(hào)斜杠,此時(shí)vscode會(huì)提供給兩個(gè)選項(xiàng),一個(gè)是imagers文件夾,另一個(gè)是imager.gpg。選擇imagers,imagers文件夾里面的imager.gpg的文件了,保存一下看看效果。

          在瀏覽器中這兩張圖片都完美的展現(xiàn)出來(lái)了。

          最后來(lái)看一下相對(duì)路徑里面的。上級(jí)路徑使用的符號(hào)是點(diǎn)點(diǎn)杠。上級(jí)路徑又應(yīng)該怎么理解?也就是圖像文件是位于當(dāng)前這個(gè) hd ml文件的上一集。

          在練習(xí)文件夾里新增一個(gè)名為 hd ml的文件夾,打開vs code,選擇剛剛新增的文件夾,選擇新建文件,這里需要新增一個(gè) hd ml文檔。在當(dāng)前 hd ml文檔中,如果想要調(diào)用上一級(jí)的 image 點(diǎn) j p g 的圖片應(yīng)該怎么做?在 sr c 屬性里面使用點(diǎn)點(diǎn)杠。

          這里 vs code提供了上一集路徑中存在的文件,選擇 image 點(diǎn) j p g,在瀏覽器中看下效果,此時(shí)圖片也是正常顯示的。如果hd ml文件藏得更深一些,把當(dāng)前的文件復(fù)制一份,新增一個(gè)hd ml文件夾,將復(fù)制的文檔粘貼一下,打開剛剛復(fù)制的文檔,修改sr c屬性里面的值,使用點(diǎn)點(diǎn)杠。

          此時(shí)是沒(méi)有找到 amage 點(diǎn) j p g 的文件,這個(gè)時(shí)候就需要重復(fù)剛剛的操作,點(diǎn)點(diǎn)杠就能找到需要到的 amage 點(diǎn) jbg 的文件了,保存一下看看效果。這里可以看到圖片還是正常顯示出來(lái)了。

          本期視頻主要了解了相對(duì)路徑的三種分類,一個(gè)是同級(jí)路徑,一個(gè)是下級(jí)路徑,還有一個(gè)是上級(jí)路徑。希望小伙伴們下來(lái)可以好好練習(xí)一下,這對(duì)于后期的內(nèi)容非常重要。下期再來(lái)聊聊絕對(duì)路徑。本期的內(nèi)容到此結(jié)束,感謝觀看,下期再見。

          最近需要在web項(xiàng)目中顯示監(jiān)控視頻,采用了webrtc+webrtc-streamer+coturn的方案實(shí)現(xiàn),能夠在公網(wǎng)上做很低的延時(shí),對(duì)于實(shí)時(shí)監(jiān)控視頻有很好的效果,是目前來(lái)講比較好的一個(gè)選擇方案。

          1、webrtc 用于視頻流的顯示。

          2、webrtc-streamer負(fù)責(zé)去監(jiān)控視頻主機(jī)(這里多數(shù)是NVR或DVR)去拉取RSTP視頻流,并轉(zhuǎn)發(fā)到Webrtc中進(jìn)行顯示。

          3、coturn用于webrtc與webrtc-streamer之間的通信穿透服務(wù),主要作用是穿透做NAT穿透,讓雙方找到能互相找到。

          網(wǎng)絡(luò)邏輯結(jié)構(gòu)圖

          一、webrtc-streamer安裝

          這里采用的是CentOS 7系統(tǒng),直接采用的Docker安裝,關(guān)于Docker安裝可以參考《Kubernetes安裝記錄》的docker部分。

          docker pull mpromonet/webrtc-streamer
          docker run -itd -p 8000:8000 --name webrtc-streamer mpromonet/webrtc-streamer -s120.92.19.150:3478 -tnoka:noka@120.92.19.150:3478

          這里后面的-t和-s參數(shù)分別指向cotum的strun和tun服務(wù),這里同內(nèi)一定要用自己搭建的穿透服務(wù),webrtc-streamer內(nèi)置的服務(wù)是指向goole提供的一個(gè)服務(wù),國(guó)內(nèi)訪問(wèn)及其不穩(wěn)定,關(guān)于cotum的安裝請(qǐng)參照官網(wǎng)。這里啟動(dòng)好以后,就可以通過(guò)瀏覽器訪問(wèn)8000端口的服務(wù)了,這里可以通過(guò)以下地址來(lái)驗(yàn)證視頻流服是否成功。

          http://ip:8000/webrtcstreamer.html?rtsp://admin:admin@ip:554/Streaming/Channels/101

          如果上面的地址能播放視頻,說(shuō)明配置成功了,地址后面的參數(shù)是視頻流的地址。

          二、web端視頻顯示代碼

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
              <!-- webrtc公用庫(kù)-->
              <script src="/js/adapter.js"></script>
              <!-- webrtc-streamer調(diào)用庫(kù),來(lái)自webrtc-streamer-->
              <script src="/js/webrtcstreamer.js"></script>
          </head>
          <body>
          <!-- 視頻顯示部分 -->
          <div id="play_div"></div>
          <script>
              var webRtcServerList = [];//視頻流服務(wù)對(duì)象部分
              var urls=[
                  'rtsp://admin:HUAN1415@192.168.1.106:554/Streaming/Channels/102',//視頻流地址
                  'rtsp://admin:HUAN1415@210.201.225.44:554/Streaming/Channels/202'//視頻流地址
              ];
              var rsurl='http://210.201.225.42:8000/';//webrtc-streamer服務(wù)地址
              //---------創(chuàng)建視頻播放界面--------------------------------------------------------
              function plays(idx){
                  var videoelt = document.createElement("video");//創(chuàng)建一個(gè)播放器
                  var vi_tag='videoTag_'+idx;//播放器的id
                  videoelt.id = vi_tag;//播放器id
                  videoelt.muted = true;
                  videoelt.width=500;
                  videoelt.height=600;
                  videoelt.controls=true;//開啟進(jìn)度條
                  document.getElementById ("play_div").appendChild(videoelt);//添加播放器到界面中
                  var webRtcServer = new WebRtcStreamer(vi_tag,rsurl);//創(chuàng)建webrtc流對(duì)象
                  //連接視頻,參數(shù)1 視頻地址,參數(shù)2 音頻地址(這里沒(méi)有),參數(shù)3 連接參數(shù)(這里采用的是tcp,120秒超時(shí)等)
                  webRtcServer.connect(urls[idx],undefined,"rtptransport=tcp&timeout=120&width=320&height=0");
                  webRtcServerList[idx]=webRtcServer;//緩存視頻流對(duì)象
              }
              //----------頁(yè)面退出時(shí)關(guān)閉播放流---------------------
              window.onbeforeunload = function() {
                  for(var i=0;i<webRtcServerList.length;i++){
                      webRtcServerList[i].disconnect();
                  }
              }
              //---------初始化加載視頻----------------------------
              window.onload= function() {
                  for(var i=0;i<urls.length;i++){
                      plays(i);
                  }
              }
          </script>
          </body>
          </html>

          這樣就完成了整個(gè)項(xiàng)目實(shí)現(xiàn),這里如果視頻沒(méi)有播放成功,最有可能是穿透服務(wù)的問(wèn)題,需要檢查穿透服務(wù)。



          前面文章中寫過(guò)類似的文章《手把手教你HTML5實(shí)現(xiàn)根據(jù)LBS定位到商家兩點(diǎn)之間距離多少》,建議有興趣的小伙伴可以看看。

          使用 HTML5 Geolocation API 來(lái)構(gòu)建基于地理位置的應(yīng)用~

          各種瀏覽器對(duì)HTML5 Geolocation 的支持

          瀏覽器 版本 只支持HTTPS版本 IE 9+ - Edge 12+ - Firefox 3.5+ - Chrome 5+ 50+ Safari 5+ 39+ iOS Safari 3.2+ 10.2+ Android Browser 2.1+ 56+ Chrome for Android 57+ 57+ UC Browser for Android 11.4+ -

          出于安全考慮,部分瀏覽器只允許通過(guò)HTTPS協(xié)議使用 Geolocation API。在HTTP協(xié)議下使用Geolocation API 瀏覽器會(huì)拋出異常,在開發(fā)階段,127.0.0.1和localhost 等本地域在兩種協(xié)議下均可使用。

          Geolocation API 通過(guò) navigator.geolocation 全局對(duì)象進(jìn)行訪問(wèn),第一次訪問(wèn)的時(shí)候會(huì)詢問(wèn)用戶是否允許共享位置。

          判斷瀏覽器是否支持 Geolocation API

                  // 判斷瀏覽器屬否支持獲取位置
                  if(navigator.geolocation){
                      console.log("可以獲取");
                  }else{
                      console.log("不支持");
                  }
          

          實(shí)例代碼如下:

          <!DOCTYPE html>
          <html lang="en">
          
          <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <meta http-equiv="X-UA-Compatible" content="ie=edge">
              <title>Document</title>
          </head>
          
          <body>
              獲取用戶地理位置
              <input type="button" value="點(diǎn)擊獲取位置" id="btn">
              <script>
                  let btnBtn = document.getElementById('btn')
                  btnBtn.onclick = () => { // 點(diǎn)擊事件
                          getAdd()
                      }
                      // 成功回調(diào)
                  let success = (position) => {
                          console.log(`獲取位置成功:${position.coords}`);
                          console.log(position.coords); // 獲取坐標(biāo)信息
                          // coords的常用屬性
                          console.log(position.coords.latitude); // 獲取坐標(biāo)緯度
                          console.log(position.coords.longitude); // 獲取坐標(biāo)經(jīng)度
                          console.log(position.coords.accuracy); // 獲取坐標(biāo)精度,單位為米
                          console.log(position.timestamp); // 獲取位置的時(shí)間戳
          
                      }
                      // 失敗回調(diào)
                  let error = (positionErr) => {
                      console.log(`獲取位置失?。?{positionErr.code}+${positionErr.message}`);
                  }
          
                  let options = {
                      enableHightAccuracy: false, // 獲取高精度的位置信息,可能會(huì)增加響應(yīng)時(shí)間,默認(rèn)是false
                      timeout: 30000, // 設(shè)置超時(shí)時(shí)間,單位毫秒,如果到達(dá)設(shè)定的時(shí)間沒(méi)獲取到信息則回觸發(fā)失敗回調(diào),默認(rèn)值為0,無(wú)限大
                      maximumAge: 0 // 設(shè)置用戶位置信息緩存的最大時(shí)間
                  }
                  let getAdd = () => {
                      navigator.geolocation.getCurrentPosition(success, error, options)
                  }
          
          
                  // 判斷瀏覽器屬否支持獲取位置
                  if(navigator.geolocation){
                      console.log("可以獲取");
                  }else{
                      console.log("不支持");
                  }
              </script>
          </body>
          
          </html>
          

          當(dāng)獲取位置失敗時(shí),會(huì)調(diào)用失敗回調(diào)(error函數(shù))。返回的參數(shù)<positionErr.code 標(biāo)識(shí)錯(cuò)誤的原因><positionErr.message錯(cuò)誤信息描述> positionErr.code 值

          • UNKNOWN_ERROR(0): 其他錯(cuò)誤
          • PERMISSION_DENIED(1): 用戶拒絕分享位置信息
          • POSITION_UNAVAILABLE(2): 獲取用戶位置信息失敗
          • TIMEOUT(3): 獲取用戶位置信息超時(shí)

          推薦文章

          《手把手教你HTML5實(shí)現(xiàn)根據(jù)LBS定位到商家兩點(diǎn)之間距離多少》
          作者:藍(lán)海00
          鏈接:https://www.jianshu.com/p/d0b0b6120055


          主站蜘蛛池模板: 一区三区三区不卡| 国产一区二区三区手机在线观看| 日韩视频一区二区三区| 麻豆一区二区三区精品视频| 精品国产亚洲一区二区三区在线观看| 亚洲中文字幕无码一区二区三区| 欧洲精品免费一区二区三区| 99久久精品国产一区二区成人| 人妻无码一区二区视频| 成人精品视频一区二区三区尤物 | 大伊香蕉精品一区视频在线| 伊人久久一区二区三区无码| 香蕉免费一区二区三区| 亚洲毛片不卡av在线播放一区| 尤物精品视频一区二区三区| 日韩人妻无码一区二区三区久久| 国产精品亚洲不卡一区二区三区| 国产精品538一区二区在线| 乱色精品无码一区二区国产盗| 国产在线不卡一区二区三区| 国产一区二区三区在线影院 | 精品视频一区二区三区在线观看| 一区二区不卡视频在线观看| 国产精品久久久久一区二区| 久久精品日韩一区国产二区| 亚洲av乱码一区二区三区| 亚洲一区动漫卡通在线播放| 亚洲视频一区网站| 99热门精品一区二区三区无码| 亚洲视频一区在线| 中文字幕乱码一区久久麻豆樱花| 亚洲国产情侣一区二区三区| 中文字幕av人妻少妇一区二区 | 亚洲视频一区二区三区四区| 91久久精品国产免费一区| 日本激情一区二区三区| 精品动漫一区二区无遮挡| 国产午夜精品一区二区三区极品| 国产福利一区视频| 国产综合一区二区在线观看| 日本在线一区二区|