Question

如果我的屏幕宽度低于1000px，我正在尝试更改我的视频源。任何帮助都会非常感激，因为我对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属性。

＆＃13;

$(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'));
});

＆＃13;

<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>

＆＃13;

根据屏幕宽度更改视频源

1 个答案: