導播臺移動端開發遇見的問題總結

zhichangterry 發布于2019-08-01 18:15 / 361人閱讀

摘要：前言移動端導播臺采用進行通信，系統要求版本使用去除輪廓外框當用戶點擊的瀏覽器中的鏈接或的可點擊的元素時，覆蓋顯示的高亮顏色。如果未設置透明度，使用默認的透明度。視頻旋轉系統，是無法阻止橫屏時視頻播放器不發生旋轉的，需要重新設置樣式。

前言：移動端導播臺采用 WebRtc 進行通信，系統要求版本 ios:11.2+

css 1、使用outline:none去除輪廓外框

div{

    outline:none;

    -webkit-tap-highlight-color:rgba(0,0,0,0);

}

當用戶點擊iOS的Safari瀏覽器中的鏈接或JavaScript的可點擊的元素時，覆蓋顯示的高亮顏色。

該屬性可以只設置透明度。如果未設置透明度，iOS Safari使用默認的透明度。當透明度設為0，則會禁用此屬性；當透明度設為1，元素在點擊時不可見。

參考地址：https://www.cnblogs.com/Allen...

2、阻止ios 10的縮放功能

標簽的方法已經失效，只能暫時用js阻止事件

 document.addEventListener("touchstart",function (event) {  
        
        if(event.touches.length>1){  

            event.preventDefault();  

        }  

    })  

    var lastTouchEnd=0;  

    document.addEventListener("touchend",function (event) {  

        var now=(new Date()).getTime();  

        if(now-lastTouchEnd<=300){  

            event.preventDefault();  

        }  

        lastTouchEnd=now;  

    },false)

3、單位vh vw

用了vh vw，在 safari 中是不包括底部按鈕框的高度，做單頁應用時要注意元素是否被遮蓋。

4、視頻旋轉

ios系統，js是無法阻止橫屏時視頻播放器不發生旋轉的，需要重新設置樣式。

@media all and (orientation: portrait) { //這里是豎屏
 
}
@media all and (orientation: landscape) {  //這里是橫屏
   
}

JS 1、判斷系統類型

var isMobile = {
    Android : function() {
    return navigator.userAgent.match(/Android/i) ? true : false;
    },
    BlackBerry : function() {
    return navigator.userAgent.match(/BlackBerry/i) ? true : false;
    },
    iOS : function() {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
    },
    Windows : function() {
    return navigator.userAgent.match(/IEMobile/i) ? true : false;
    },
    any : function() {
    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
    }
};

 if (isMobile.iOS()) {//ios*斜體文字*
           
    }

GPU云服務器云服務器 php 常遇見的問題天馬導播臺移動端開發 web移動端開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51603.html

導播臺移動端開發遇見的問題總結

摘要：前言移動端導播臺采用進行通信，系統要求版本使用去除輪廓外框當用戶點擊的瀏覽器中的鏈接或的可點擊的元素時，覆蓋顯示的高亮顏色。如果未設置透明度，使用默認的透明度。視頻旋轉系統，是無法阻止橫屏時視頻播放器不發生旋轉的，需要重新設置樣式。前言：移動端導播臺采用 WebRtc 進行通信，系統要求版本 ios:11.2+ css 1、使用outline:none去除輪廓外框 div{ ...

劉東 2019-08-29 14:06 評論0 收藏0
導播臺移動端開發遇見的問題總結

摘要：前言移動端導播臺采用進行通信，系統要求版本使用去除輪廓外框當用戶點擊的瀏覽器中的鏈接或的可點擊的元素時，覆蓋顯示的高亮顏色。如果未設置透明度，使用默認的透明度。視頻旋轉系統，是無法阻止橫屏時視頻播放器不發生旋轉的，需要重新設置樣式。前言：移動端導播臺采用 WebRtc 進行通信，系統要求版本 ios:11.2+ css 1、使用outline:none去除輪廓外框 div{ ...

The question 2019-08-21 18:19 評論0 收藏0
世界杯千萬級直播高穩定的挑戰和實踐

摘要：今年夏天，俄羅斯世界杯召開。世界杯高達千萬級的并發在線觀看用戶，且用戶量徒增非常明顯。安全世界杯賽事直播護航工作中，內容的安全和穩定同樣重要。今年夏天，俄羅斯世界杯召開。在剛剛落幕的重慶云棲飛天技術匯專場中，阿里視頻云技術專家裘良科，就世界杯這個話題，跟參會嘉賓一起探討了千萬級直播高穩定的挑戰和相關實踐，本文為演講全文。 showImg(https://segmentfault.co...

Darkgel 2019-06-21 16:47 評論0 收藏0