如果分辨率为

-1

，则将视频适合移动设备的宽度我正在使用以下内容，但它只显示适合屏幕的一半视频。如果分辨率为

.video-container { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 
.video-container video { 

    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
}

来源

2017-08-26 Black Heart

请提供jsfidler –

请[编辑]你的问题是关于话题：包括[MCVE]认为复制的问题。寻求调试帮助的问题（“为什么这个代码不工作？”）必须包括：（1）期望的行为，（2）特定的问题或错误，以及（3）在问题本身中重现它*所需的最短代码*。请参阅：[我可以在这里询问什么主题？]（// stackoverflow.com/help/on-topic）和[问问]。这个问题是关于JavaScript/HTML/CSS的，所以你应该考虑使用[snippet]（// blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）。 – Makyen

@EmadFani，最好让他们在问题中提供[snippet]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）比在外部网站上的东西。调试问题需要[mcve]在问题本身中*。离开代码对未来的其他用户来说明显不那么有利，并且如果其他站点消失，可能会完全使该问题失效。因此，应该鼓励保持堆栈溢出的代码。这并不意味着*也有*其他地方的代码有时不会有好处。 – Makyen

.video-container { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
.video-container video { 
 

 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%,-50%); 
 
}

<div class='video-container'> 
 
      
 
    <video controls="controls" 
 
      x-webkit-airplay="allow" 
 
      data-youtube-id="N9oxmRT2YWw" 
 
      src="your/video/path/here"> 
 
    </video> 
 
</div>

来源

2017-08-26 04:16:18

看一看这样的：

<div id="video-local"> 
<video id="myvideo"></video> 
</div>

例如视频，我用getusermedia（你可以尝试不同的分辨率来检查）：

navigator.getUserMedia = navigator.getUserMedia || 
         navigator.webkitGetUserMedia || 
         navigator.mozGetUserMedia; 

if (navigator.getUserMedia) { 
    navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } }, 
     function(stream) { 
     var video = document.querySelector('video'); 
     video.srcObject = stream; 
     video.onloadedmetadata = function(e) { 
      video.play(); 
     }; 
     }, 
     function(err) { 
     console.log("The following error occurred: " + err.name); 
     } 
    ); 
} else { 
    console.log("getUserMedia not supported"); 
}

最后一些CSS：

#video-local video { 
    display: block; 
    margin: 0 auto; 
    height: 100%; 
    width: 100% ; 
    max-width: auto; 
    max-height: auto; 
    padding: 1% 5% 10% 5%; 
}

参见： https://jsfiddle.net/v07rk7qz/1/

来源

2017-08-26 06:32:10 Polaris

没有工作。高度与原始视频保持一致。它没有得到调整。 –

添加对象配合：初始;的伎俩

.video-container video { 
     object-fit: initial; 
     position: absolute; 
     width: 100%; 
     height: 100%; 
    }

来源

2017-08-27 15:48:12

如果分辨率为

回答

相关问题