为什么我不能在 src 的同时改变一个 HTML 属性？

Question

我有一个带有 src 的 muted 视频标签。我能够以编程方式取消视频静音，但如果我同时更改 src 则不能（顺序无关）。任何想法为什么会这样？这是一个例子：

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

 $('#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

尝试使用 .removeAttr()、.clone() 原始 jQuery 对象删除 muted 属性，将原始 <video> 元素替换为具有 .replaceWith() 的克隆元素

setTimeout(function(video){
  video.replaceWith(video.clone().removeAttr("muted")
  .prop("src", "http://webm.land/media/1KM9.webm")) 
}, 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 2

Remove both attribute and property "muted" from the element as even if attribute is removed, property remains true!

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

Answer 3

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

有效！

为什么我不能在 src 的同时改变一个 HTML 属性？

Why can't I change an HTML property at the same time as src?

html

javascript

jquery

html5-video