內嵌視頻調整大小爲移動（jam3）實現對象適合：覆蓋

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 

，它僅適用於某些延伸（罰款o n移動但它並不真正覆蓋寬桌面視口）

非常感謝您的幫助！

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' 

    }