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