导播台移动端开发遇见的问题总结

刘东发布于2019-08-29 14:06 / 365人阅读

摘要：前言移动端导播台采用进行通信，系统要求版本使用去除轮廓外框当用户点击的浏览器中的链接或的可点击的元素时，覆盖显示的高亮颜色。如果未设置透明度，使用默认的透明度。视频旋转系统，是无法阻止横屏时视频播放器不发生旋转的，需要重新设置样式。

前言：移动端导播台采用 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移动端开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112927.html

导播台移动端开发遇见的问题总结

摘要：前言移动端导播台采用进行通信，系统要求版本使用去除轮廓外框当用户点击的浏览器中的链接或的可点击的元素时，覆盖显示的高亮颜色。如果未设置透明度，使用默认的透明度。视频旋转系统，是无法阻止横屏时视频播放器不发生旋转的，需要重新设置样式。前言：移动端导播台采用 WebRtc 进行通信，系统要求版本 ios:11.2+ css 1、使用outline:none去除轮廓外框 div{ ...

zhichangterry 2019-08-01 18:15 评论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