Question

我试图让https://github.com/Jam3/ios-video-test为我的目的而工作。

我希望视频可以缩放并覆盖移动和桌面上的整个视口，类似于物体适合：封面或高度：100％和宽度自动（现在它可以缩放以适应宽度）

我改变了这个......

 resize()
  window.addEventListener('resize', resize, false)
  function resize () {
    var width = document.documentElement.clientWidth
    var height = document.documentElement.clientHeight
    letterbox(canvas, [
      width, height
    ], canvasVideo.video)
  }

  // resize and reposition canvas to form a letterbox view
  function letterbox (element, parent, video) {
    var aspect = video.videoWidth / video.videoHeight
    var pwidth = parent[0]
    var pheight = parent[1]

    var width = pwidth
    var height = Math.round(width / aspect)
    var y = Math.floor(pheight - height) / 2

    // this is a fix specifically for full-screen on iOS9
    // without it, the status bars will not hide... O.o
    if (canvasVideo.fallback) height += 1

    element.style.top = y + 'px'
    element.style.width = width + 'px'
    element.style.height = height + 'px'
  }

要破解这个（不会撒谎，我真的对我正在做的事情知之甚少）......

   var width = Math.round(height / aspect)
   var height = pheight
   var y = Math.floor(pheight - height) / 2

它只能在一定程度上起作用（在移动设备上很好，但它并不能真正覆盖宽桌面视口）

非常感谢你的帮助！

Answer 1

所以如果有人遇到类似的问题，解决方案就是这个......

  // resize and reposition canvas to form a letterbox view
  function letterbox (element, parent, video) {
    var aspect = video.videoWidth / video.videoHeight

    var parentWidth = parent[0]
    var parentHeight = parent[1]
    var parentAspectRatio = parentWidth / parentHeight
    var childWidth = video.videoWidth
    var childHeight = video.videoHeight
    var childAspectRatio = childWidth / childHeight

    var targetWidth = 0
    var targetHeight = 0

    if (parentAspectRatio > childAspectRatio) {


      targetWidth = parentWidth
      targetHeight = targetWidth / childAspectRatio

    } else {


     targetHeight = parentHeight
     targetWidth = targetHeight * childAspectRatio

    }

    element.style.width = targetWidth + 'px'
    element.style.height = targetHeight + 'px'
    element.style.left = -(targetWidth - parentWidth) / 2 + 'px'
    element.style.top = -(targetHeight - parentHeight) / 2 + 'px'

  }

内联视频调整大小为移动（jam3）以实现对象适应：封面

1 个答案: