HTML移動大小的背景視頻？

所以我的網站有問題。當過我啓動它作爲其桌面版本，它打開了視頻作爲它想：https://edgaraxe.net/teamhusky/HTML移動大小的背景視頻？

下面是視頻代碼：

<div class="background-wrap"> 
    <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> 
     <source src="video/husky.mp4" type="video/mp4"> 
     Video not supported 
    </video> 
</div>

但是如果我打開了手機版本，我得到一個黑色的屏幕。

是這裏的任何方式，使移動版本打開視頻？因爲我在尋找解決方案，並且有人說它不支持在手機上播放視頻。因此，有沒有辦法打開圖像，而不是移動版本？

來源

2016-01-24 ed_laika

意見：白色背景上的白色文字是一個可怕的選擇。 –

@Derek朕會功夫感謝您的諮詢！ –

參數poster添加到您的video標籤是這樣的：

<video .... poster="PATH_TO_IMAGE" autoplay="false"> 
    .... 
</video>

來源

2016-01-24 19:42:28

謝謝你的幫助！ –

<video />標記具有poster屬性，該屬性將顯示在支持video元素的設備上，但不支持自動播放。

<video poster="URL_TO_IMAGE" id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> 
    <source src="video/husky.mp4" type="video/mp4"> 
    Video not supported 
    </video>

來源

2016-01-24 19:36:51

或者您可以用JavaScript啓動它... –

感謝您的幫助！ –

您可以以運行在多個瀏覽器（包括移動的）視頻使用多種視頻格式。因此，嘗試添加一個.webm視頻：

<div class="background-wrap"> 
    <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> 
     <source src="video/husky.mp4" type="video/mp4"> 
     <source src="video/husky.webm" type="video/webm"> 
     Video not supported 
    </video> 
</div>

來源

2016-01-24 19:39:45

我試過了，但它仍然是一個空白的屏幕！ –

也許你必須使用正確的編解碼器或格式轉換視頻。檢查[本網站]（https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats），其中包含與瀏覽器兼容的表格。 –

謝謝你的幫助！：D –

HTML移動大小的背景視頻？

回答

相關問題