響應式HTML5視頻 - 在iOS中調整大小

我們無法顯示響應式HTML5視頻並獲得正確的比例;響應式HTML5視頻 - 在iOS中調整大小

在桌面瀏覽器上，尺度很好 - 視頻和海報圖像完美地縮放。然而，在iPhone Safari上，視頻並沒有完整的寬度，留下了一個黑色的「邊框/填充」。

該CSS;

.hero-video { 
    /* The Container */ 
height: 338px; 
width: 66.6%; 
} 
.hero-video video { 
height: auto; 
width: 100%; 
}

的HTML

<div class="hero-video"> 
    <video id="intro-video" controls preload="auto" poster="img/trigger-intro.png" width="auto" height="auto"> 
    <source src="media/intro.mp4" type='video/mp4' /> 
    <source src="media/intro.webm" type='video/webm' /> 
     Your browser does not support this video. 
    </video> 
</div>

來源

2014-04-07 user2642236

您能否給出這個問題的視覺？這張海報是否填滿了視頻標籤的整個寬度？順便說一句我認爲寬度=「自動」是無效的值，你需要設置像素（靜態或CSS/JS動態值）。 –

感謝您的答覆 - 現階段難以在NDA下分享客戶的工作。海報不會填滿視頻的全部寬度。我會嘗試刪除寬度=「自動」，看看它是怎麼回事... – user2642236

這工作對我。

我非常確定您可以進一步更改和清理HTML標記和CSS規則，但到目前爲止這適用於iPhone，Android和Kindle Fire設備。

對於視頻HTML標記我使用這個。

<video autoplay="autoplay" id="background" loop="loop" muted="" poster="solar.jpg" data-autoplay="" playsinline="" height="750" width="1600"> 
<source src="solar5.mp4" type="video/mp4"> 
</video>

對於我使用這個CSS。

#background { 
position: relative; 
min-width: 100%; 
min-height: 100%; 
width: 100%; 
height: 100%; 
z-index: -100; 
-webkit-transform: translateX(0%) translateY(-20%); 
transform: translateX(0%) translateY(-20%); 
background: url("solar.jpg") no-repeat; 
background-size: cover; 
opacity: 1; 
} 
.video { 
position:relative; 
padding-bottom:44.25%; 
padding-top:30px; 
height:0; 
overflow:hidden; 
}

來源

2017-04-01 10:56:48 lupoll88

響應式HTML5視頻 - 在iOS中調整大小

回答

相關問題