如果分辨率爲

-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

如果分辨率爲

回答

相關問題