视频容器div上的Safari 11 css缩放使视频控件太小

是指在Safari 11浏览器中，通过使用CSS缩放属性对视频容器进行缩放操作，导致视频控件显示过小的问题。

解决这个问题的方法是使用JavaScript来检测用户使用的浏览器是否为Safari 11，并根据检测结果对视频容器进行相应的处理。以下是一个可能的解决方案：

首先，使用JavaScript来检测用户使用的浏览器是否为Safari 11。可以通过检测浏览器的User-Agent字符串来实现。如果是Safari 11，则执行下一步的处理；否则，不进行任何处理。
在Safari 11中，通过JavaScript获取视频容器的原始宽度和高度，并计算出缩放比例。
使用JavaScript动态修改视频容器的宽度和高度，将其恢复到原始尺寸。
使用CSS样式来调整视频控件的大小，使其适应恢复后的视频容器尺寸。

下面是一个示例代码，演示了如何通过JavaScript来解决这个问题：

// 检测浏览器是否为Safari 11
var isSafari11 = /^((?!chrome|android).)*safari/i.test(navigator.userAgent) && parseFloat(navigator.userAgent.match(/Version\/([0-9]+)/)[1]) >= 11;

if (isSafari11) {
  // 获取视频容器
  var videoContainer = document.getElementById('video-container');

  // 获取视频容器的原始宽度和高度
  var originalWidth = videoContainer.offsetWidth;
  var originalHeight = videoContainer.offsetHeight;

  // 计算缩放比例
  var scale = 1 / window.devicePixelRatio;

  // 恢复视频容器的尺寸
  videoContainer.style.width = originalWidth + 'px';
  videoContainer.style.height = originalHeight + 'px';

  // 调整视频控件的大小
  var videoControls = videoContainer.getElementsByTagName('video')[0].controls;
  videoControls.style.transform = 'scale(' + scale + ')';
}

这样，通过以上的代码处理，可以解决在Safari 11中使用CSS缩放导致视频控件过小的问题。

对于视频容器div上的Safari 11 css缩放使视频控件太小的问题，腾讯云提供了一系列的云服务和产品来支持视频处理和分发。其中，推荐的产品是腾讯云视频处理服务，该服务提供了丰富的视频处理功能和工具，可以满足各种视频处理需求。您可以通过以下链接了解更多关于腾讯云视频处理服务的信息：

腾讯云视频处理服务：https://cloud.tencent.com/product/vod