在手機上顯示背景圖像而不是背景視頻

我希望有人能幫助我。我正在尋找改變當前在主頁上的英雄面板上播放的視頻以代替顯示圖像。當然，我可以通過使用CSS隱藏視頻，但這仍然意味着視頻將在背景中加載，這不是我想要的。在手機上顯示背景圖像而不是背景視頻

這是我有的html。

<video id="heroVideo" autoplay="" loop="" muted="" poster="../images/video-bg.jpg"> 
    <source src="../video/loop.webm" type="video/webm"> 
    <source src="../video/loop.mp4" type="video/mp4"> 
</video>

我做這似乎以下工作的，但不知道是否有更好的辦法：

if (Modernizr.mq('only all and (max-width: 768px)')) { 
    $('#heroVideo').detach(); 
}

這是做的正確的方式或者是有更好的辦法。

來源

2015-09-17 Chris Dutton

在<head>....</head>部分補充一點：

<script type="text/javascript"> 
    $(#heroVideo).remove(); 
</script>

或者只是修改當前的腳本，並與remove這樣的替換detach：

if (Modernizr.mq('only all and (max-width: 768px)')) { 
    $('#heroVideo').remove(); 
}

區別：

detach()：.detach（）方法與.remove（）相同，不同之處在於.detach（）保留所有jQuery數據與刪除的元素相關聯。

remove()：使用.remove（）當你想刪除元素本身，以及它裏面的所有東西。除了元素本身之外，所有與元素相關的綁定事件和jQuery數據都將被刪除。

來源

2015-09-17 19:16:49

在手機上顯示背景圖像而不是背景視頻

回答

相關問題