JS窗口寬度html5視頻元素響應

Question

好吧，我一直在嘗試很多不同的事情，但是無法正常工作。 所以我在這里問。

我在頁面上有3個視頻元素。 一種用於台式機，平板電腦和智能手機。 現在，我需要根據屏幕尺寸刪除視頻元素。

So when screen size is < 767:
Smartphone = visible
Tablet = removed
Desktop = removed

Screen size is >=767 && <980
Smartphone = removed
Tablet = visible
Desktop = removed

Screen size is >=980
Smartphone = removed
Tablet = removed
Desktop = visible

CSS媒體查詢還無法正常工作，因為視頻元素一直在播放。 是的，可以在手機上禁止自動播放，但是在桌面瀏覽器上調整其大小時，不會發生這種情況。 因此顯示：無； 毫無疑問。

因此，我需要創建一些JS魔術。 到目前為止，這是我嘗試將所有可以填寫的內容填寫到空白頁中的內容，但到目前為止，此操作並未達到預期的效果。

$(document).ready(function () {
$(window).resize(function () {
    if ($(this).width() < 767)
        WHAT SHOULD I WRITE HERE
    else if ($(this).width() >= 767 && $(this).width() < 980)            
        WHAT SHOULD I WRITE HERE            
    else if ($(this).width() >= 980)                        
        WHAT SHOULD I WRITE HERE            
});
});

http://jsfiddle.net/36unpxj0/2/

在上面的小提琴中，您可以完全看到代碼並對其進行弄弄。 非常感謝您的幫助。

PS：jQuery解決方案與純JS一樣受歡迎，但是請告訴您它是JS還是jQuery。

編輯1：

像往常一樣，我將繼續搜索並向該帖子添加信息！ 我發現以下可以解決問題的方法：

$("#video-ID").first().attr('src','')

要么

$("#video-ID").empty().remove();

我都嘗試了兩次，但都沒有運氣：請參見小提琴http://jsfiddle.net/36unpxj0/3/

編輯2：

好吧，它從CitizenDelta得到了答案，並且它正在JSFiddle中運行，因此我接受了他的答案。 但是，當前在Joomla網站中無法使用。 因此，我將繼續尋找。

Answer 1

我希望這里是一個演示，它是您所需要的： 演示

腳步 ：

1. 我隱藏了每個視頻（pauseAndHideAll函數）
2. 我檢測到屏幕（showTheGoodOne函數）
3. 我展示並播放相應的視頻

在JavaScript中，我剛做了這個：

$(document).ready(function () {

function pauseAndHide($element) {
    $element.get(0).pause();
    $element.hide();
}

function showTheGoodOne() {
    if ($(window).width() < 767) {
        $('#smartphonevid').show();
        $('#smartphonevid').get(0).play();
    } else if ($(window).width() >= 767 && $(this).width() < 980)   {
        $('#tabletvid').show();
        $('#tabletvid').get(0).play();
    } else if ($(window).width() >= 980)  {
        $('#desktopvid').show();
        $('#desktopvid').get(0).play();
    } 
}

function pauseAndHideAll() {   
    $('video').each(function() {
        pauseAndHide($(this));         
    });     
}

pauseAndHideAll();
showTheGoodOne();

$(window).resize(function () {
    pauseAndHideAll();
    showTheGoodOne();
});
});

臨時改進：

也許您可以檢測到視頻的當前播放時間，然后將其他視頻恢復到該時間。

Answer 2

希望這對您有幫助

 #video-bg { height: 0; overflow: hidden; padding-bottom: 56.25%; padding-top: 30px; position: relative; } #video-bg > video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

 <div id="video-bg" class="smartphone"> <video autoplay muted loop controls id="smartphonevid"> <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> </video> </div>