根據屏幕寬度更改視頻源

Question

如果我的屏幕寬度低於1000像素，我試圖更改我的視頻源。 任何幫助將不勝感激，因爲我與JavaScript和JQuery的小知識，我不知道從這裏做什麼。 謝謝。

我當前的代碼如下：

HTML

<video id="bg-vid" autoplay defaltmuted playsinline> 
     <source id="v1" src="img/optimised/desktop-palmtrees.mp4" type="video/mp4"> 
     <source src="img/Palm_Trees.webm" type="video/webm" onerror="fallback(parentNode)"> 
    </video> 

jQuery的

$(document).ready(function($){ 
'use strict'; 
    if ($(window).width() < 1000) { 
     var videoFile = 'img/optimised/desktop-palmtrees.mp4'; 
     var source = document.getelementbyid('v1'); 
     source.src = videoFile; 
    } 
    else if ($(window).width() > 1000) { 
     var videoFile = 'img/optimised/iphone-palmtrees.mp4'; 
     var source = document.getelementbyid('v1'); 
     source.src = videoFile; 
    } 
}); 

Answer 1

在這裏，你走了，我加了一些console.log()爲你跟蹤src屬性。

$(function(){ 
 
    console.log('before: '+$('#v1').attr('src')); 
 
    if ($(window).width() < 1000) { 
 
     var videoFile = 'img/optimised/desktop-palmtrees.mp4'; 
 
     $('#v1').attr('src',videoFile); 
 
    } 
 
    else if ($(window).width() > 1000) { 
 
     var videoFile = 'img/optimised/iphone-palmtrees.mp4'; 
 
     $('#v1').attr('src',videoFile); 
 
    } 
 
    console.log('after: '+$('#v1').attr('src')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<video id="bg-vid" autoplay defaltmuted playsinline> 
 
     <source id="v1" src="test.mp4" type="video/mp4"> 
 
     <source src="img/Palm_Trees.webm" type="video/webm" > 
 
    </video>