オブジェクトフィットを実現するためのモバイル（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 

とそれだけに動作しますある程度拡張するあなたは本当に広いデスクトップビューポートをカバーしていません）

ありがとうございました！

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' 

    } 

た同様の問題がありました