根据屏幕宽度更改视频源

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>