HTML5播放器控件太長

出於某種原因，我的HTML5播放器在Safari看起來有點長於影片的寬度。我似乎無法控制它的樣式=「寬度：無論」任何想法？

<video id="vid1" width="960" height="540" onclick="this.paused?this.play():this.pause();" controls> 
<source src="video.mp4" type="video/mp4"> 
Your browser does not support HTML5 video. 
</video>

來源

2017-03-24 user4076181

您可以動態調整視頻容器的寬度，使其與已加載視頻的寬度相匹配。您可以使用videoWidth屬性。

$('#vid1').on('loadedmetadata', function(){ 
    var videoW = $(this)[0].videoWidth; 
    $(this).css('width', videoW); 
});

編輯：

在你的照片好像是視頻CSS使用的是大的邊界。謹防用css box-sizing屬性。在視頻元素中進行測試並刪除邊框或使用box-sizing: border-box;樣式。

來源

2017-03-24 18:05:18 Hokusai

我只是想通了。我在我的CSS中有這個：

#vid1::-webkit-media-controls-panel { 
    width: calc(100%+30px); /* Adjust as needed */ 
}

來源

2017-03-24 18:15:31 user4076181

HTML5播放器控件太長

回答

相關問題