在JavaScript中获取使用object-fit:cover的视频上下左右裁剪像素尺寸

Hey there! Great question—figuring out exactly how much of your video gets cropped when using object-fit: cover is totally achievable with a bit of JavaScript and aspect ratio math. Here's a step-by-step breakdown to get those crop values:

How object-fit: cover Works First #

Before diving into calculations, let's recap: this property scales your video to keep its original aspect ratio while filling the entire parent container. Any part of the video that doesn't fit the container's dimensions gets cropped equally on the opposite sides (left/right if the video is too wide, top/bottom if it's too tall).

Step-by-Step Calculation Logic #

To find the crop amounts, you'll need to:

1. Grab the width and height of your parent container (the .playerstream div)
2. Get the video's natural, unscaled dimensions
3. Compare the aspect ratios of the container and video to see which axis is overflowing
4. Compute the scaled size of the video, then split the overflow between the two cropped sides

Reusable JavaScript Function #

Here's a function that will return precise crop values for left, right, top, and bottom:

function calculateVideoCrop(containerId, videoId) {
  // Fetch container and video elements
  const container = document.getElementById(containerId);
  const video = document.getElementById(videoId);
  
  if (!container || !video) return null;
  
  // Get container dimensions (excludes borders/scrollbars)
  const containerWidth = container.clientWidth;
  const containerHeight = container.clientHeight;
  
  // Get video's original, unaltered dimensions
  const videoNaturalWidth = video.videoWidth;
  const videoNaturalHeight = video.videoHeight;
  
  // Calculate aspect ratios
  const containerAspect = containerWidth / containerHeight;
  const videoAspect = videoNaturalWidth / videoNaturalHeight;
  
  let cropLeft = 0, cropRight = 0, cropTop = 0, cropBottom = 0;
  
  if (videoAspect > containerAspect) {
    // Video is wider relative to container—crop left/right
    const scaledVideoHeight = containerHeight;
    const scaledVideoWidth = videoNaturalWidth * (containerHeight / videoNaturalHeight);
    
    const overflowWidth = scaledVideoWidth - containerWidth;
    cropLeft = overflowWidth / 2;
    cropRight = overflowWidth / 2;
  } else {
    // Video is taller relative to container—crop top/bottom
    const scaledVideoWidth = containerWidth;
    const scaledVideoHeight = videoNaturalHeight * (containerWidth / videoNaturalWidth);
    
    const overflowHeight = scaledVideoHeight - containerHeight;
    cropTop = overflowHeight / 2;
    cropBottom = overflowHeight / 2;
  }
  
  return { left: cropLeft, right: cropRight, top: cropTop, bottom: cropBottom };
}

// Use with your elements:
const cropValues = calculateVideoCrop('pl_828213754661263600', 'stream828213754661263600');
console.log(cropValues);
// Example output: { left: 50, right:50, top:0, bottom:0 } (if video is too wide)

Important Notes #

• Wait for Video Load: Make sure the video has loaded its metadata before running the function—otherwise videoWidth and videoHeight will be 0. Add a listener for the loadedmetadata event:

  const video = document.getElementById('stream828213754661263600');
  video.addEventListener('loadedmetadata', () => {
    const cropValues = calculateVideoCrop('pl_828213754661263600', 'stream828213754661263600');
    console.log(cropValues);
  });
  

• Dynamic Resizing: If your container changes size (e.g., window resize), re-run the function in a resize event listener to update crop values.
• Adjust for Borders/Padding: If your container has padding or borders, use offsetWidth/offsetHeight instead of clientWidth/clientHeight, or subtract padding values using getComputedStyle.

内容的提问来源于stack exchange，提问作者Zahid Nisar