为什么我不能在更改 src 的同时更改 HTML 属性？答案

【问题标题】：Why can't I change an HTML property at the same time as src?为什么我不能在更改 src 的同时更改 HTML 属性？
【发布时间】：2016-06-26 05:02:46
【问题描述】：

我有一个带有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" />

【问题讨论】：

但如果第一个视频没有静音，那么新视频也不会静音。而且静音和更改 src 的顺序似乎没有任何区别。关于如何解决这个问题的任何想法？

标签： javascript jquery html html5-video

【解决方案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" />

有效！

【讨论】：

OP 没想到会这样。他想unmute 第二个视频
@Rayon 是的，它有效。在我的代码 sn-p 中尝试一下。
这非常令人惊讶。知道为什么在更改 src 时需要这样做吗？我最好的猜测是修改 src 会在 DOM 中将要更改的元素排入队列，因此属性更改只会影响旧元素。

【解决方案2】：

从元素中同时删除attribute 和property "muted"，即使属性被删除，property 仍然是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" />

【讨论】：

谢谢人造丝！虽然您的答案更清楚，但我接受 Cesar 的答案是因为他先得到了答案，但我感谢您的帮助。

【解决方案3】：

尝试使用.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" />

【讨论】：

我不是那个..但这不起作用.. 经过测试！
@Rayon “我不是那个..但这不起作用..经过测试！”？请参阅更新后的 stacksn-ps。您可以发布指向 jsfiddle 的链接以显示“不起作用”吗？
如果你浏览了 OP 发布的代码，它在标记中有muted 属性.. 用那个测试它..
@Rayon 您是否尝试过更新 stacksn-ps 的方法？