我正试图使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


并且仅在一定程度上起作用(在移动设备上很好,但实际上并没有涵盖宽阔的桌面视口)

非常感谢你的帮助!

最佳答案

因此,如果有人遇到类似问题,解决方案是…

  // 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'

  }

07-27 13:38