Warum kann ich eine HTML-Eigenschaft nicht gleichzeitig mit src ändern?

Question

Ich habe eine muted Video-Tag mit einer src. Ich bin in der Lage, das Video programmgesteuert zu deaktivieren, aber nicht, wenn ich die src gleichzeitig ändere (Reihenfolge irrelevant). Irgendwelche Ideen, warum das sein könnte? Hier ein Beispiel:

setTimeout(function(){ 
 
\t // If you comment out this line and src doesn't change, it works. 
 
\t $('#video').prop('src', 'http://webm.land/media/1KM9.webm'); 
 

 
\t $('#video').prop('muted', false); 
 
}, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<video id="video" autoplay muted src="http://webm.land/media/KLNV.webm" width="400" height="200" />

Answer 1

setTimeout(function() { 
 
    $('#video').removeAttr('muted'); 
 
    $('#video').prop('src', 'http://webm.land/media/1KM9.webm'); 
 
    document.getElementById('video').muted = false; 
 
}, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<video id="video" autoplay muted src="http://webm.land/media/KLNV.webm" width="400" height="200" />

Es funktioniert!

Answer 2

Versuche Entfernen muted Attribut .removeAttr(), .clone() original jQuery-Objekt, original <video> Element mit geklonten Elemente ersetzt mit .replaceWith()

setTimeout(function(video){ 
 
    video.replaceWith(video.clone().removeAttr("muted") 
 
    .prop("src", "http://webm.land/media/1KM9.webm")) \t 
 
}, 3000, $("#video"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<video id="video" autoplay muted src="http://webm.land/media/KLNV.webm" width="400" height="200" />

Answer 3

entfernen sowohl attribute und property"muted" aus dem Element als auch wenn Attribut entfernt wird, bleibt propertytrue!

setTimeout(function() { 
 
    $('#video').removeAttr('muted'); 
 
    console.log($('#video').prop('muted')); 
 
    $('#video').prop('muted', false); 
 
    $('#video').prop('src', 'http://webm.land/media/1KM9.webm'); 
 
}, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<video id="video" autoplay muted="muted" src="http://webm.land/media/KLNV.webm" width="400" height="200" />