rtsp轉rtmp、hls網頁直播服務器EasyNVR前端兼容性調試：ie下的 pointer-events: none

發現問題：

以前在作EasyNVR 的web頁面開發過程當中，力求的都是一個播放效果的、功能的展現。對於兼容性也有注意，但有些細節仍是不免有所疏忽。

內部測試發現：因爲咱們是流媒體的實時視頻直播，在web的直播頁面中，咱們都是屏蔽、刪除播放器的暫停按鈕、功能的。咱們的web頁面播放rtmp、hls使用的是videojs。他是一個開源的播放器，網上也有相關的文檔。

基於需求，結合現實，學習手冊，落實開發，咱們經過設置css屬性來完成這個需求：

• 屏蔽單機頁面暫停

.video-js .vjs-tech { pointer-events: none; }

這個屬性設置 很好的在chrome中完成了需求。可是在IE中彷佛就沒有可以完成本身應有的任務了。
結合：

• 隱藏暫停、開始按鈕

.vjs-progress-control,.vjs-remaining-time-display{
       visibility: hidden;
   }
   .video-js .vjs-play-control.vjs-playing {
      visibility: hidden;
   }

還能夠將他的樣式也一併的隱藏起來。

可是，在IE瀏覽器下，這些屬性好像並無起到做用。

當咱們單擊播放器時，依然會出現暫停的狀況。

分析問題：

個人第一想法是，是不是videojs對於ie瀏覽器的不兼容。才結果來看， 我在這個方面作了不少的無用功。雖然問題是出如今videojs的播放器上面，可是罪魁禍首不是它。

讓咱們完成需求的操做實際上是「pointer-events: none;」這個CSS屬性的設置；因而我對這個屬性進行了小小的瞭解。

pointer-events: none
元素永遠不會成爲鼠標事件的target。可是，當其後代元素的pointer-events屬性指定其餘值時，鼠標事件能夠指向後代元素，在這種狀況下，鼠標事件將在捕獲或冒泡階觸發父元素的事件偵聽器。

也就是說，這個屬性的IE尚未很好的支持；

解決問題：

我是咱們就須要找個其餘方式，來解決這個問題，來完成咱們的需求；

咱們在js中動態的設置：

$(".vjs-tech").prop("disabled",true);

後面.prop是設置對象的屬性。
後面兩個參數是設置：disabled的屬性爲false，就是設置爲可用可編輯的意思;
disabled的屬性爲true，就是設置爲不可用、不可編輯的意思。

依然能夠達到需求的效果:

---

關於EasyNVR

EasyNVR可以經過簡單的網絡攝像機通道配置，將傳統監控行業裏面的高清網絡攝像機IP Camera、NVR等具備RTSP協議輸出的設備接入到EasyNVR，EasyNVR可以將這些視頻源的音視頻數據進行拉取，轉換爲RTMP/HLS，進行全平臺終端H5直播（Web、Android、iOS），而且EasyNVR可以將視頻源的直播數據對接到第三方CDN網絡，實現互聯網級別的直播分發；

詳細說明：http://www.easydarwin.org/easynvr/

獲取更多信息

郵件：support@easydarwin.org

WEB：www.EasyDarwin.org

Copyright © EasyDarwin.org 2012-2017