去掉谷歌浏览器 video标签下的下载按钮

Posted 2020-10-01 karila

一、判断浏览器版本（区分谷歌和360浏览器）

function myBrowser(){
      var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
      var isOpera = userAgent.indexOf("Opera") > -1;
      if (isOpera) {
        return "Opera"
      }; //判断是否Opera浏览器
      if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
      } //判断是否Firefox浏览器
      if (userAgent.indexOf("Chrome") > -1){
        return "Chrome";
       /* var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");
        if(is360){
          return "360";
        }else{
          return "Chrome";
        }*/
      }
      if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
      } //判断是否Safari浏览器
      if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
        return "IE";
      }; //判断是否IE浏览器

      //测试mime
      function _mime(option, value) {
           var mimeTypes = navigator.mimeTypes;
           for (var mt in mimeTypes) {
                 if (mimeTypes[mt][option] == value) {
                       return true;
                   }
             }
           return false;
      }

    }

　　

二、去除video标签中的下载按钮

因为一般浏览器不会出现下载按钮，，只有谷歌浏览器会（低版本的右下角没有下载按钮，比如53.0版本，我的谷歌浏览器是53.0版本) 。

（1）先判断是否为谷歌浏览器

$scope.isChrome=false;
  var  myBrowser=myBrowser();
if(myBrowser=="Chrome"){
  var curChormeVersion=parseInt(navigator.userAgent.split("Chrome")[1].substring(1,5));
  console.log(curChormeVersion);
  if(curChormeVersion>=54){
    $scope.isChrome=true;
  }else{
    $scope.isChrome=false;
  }
}

　（2）如果是谷歌浏览器，则通过hack不显示（53.0及以下不会下载按钮）

ng-class="{‘isChrome‘:isChrome}"

　　

//去掉video中的下载按钮
.isChrome{
  video::-internal-media-controls-download-button {
    display:none;
  }

  video::-webkit-media-controls-enclosure {
    overflow:hidden;
  }

  video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
  }
}