CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-video
Yousef Amar
Yousef Amar

Reputation: 661

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

I have a muted video tag with a src. I'm able to un-mute the video programmatically, but not if I change the src at the same time (order irrelevant). Any ideas why that may be? Here's an example:

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

Upvotes: 0

Views: 118

Answers (3)

Rayon
Rayon

Reputation: 36609

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

Upvotes: 2

Cesar Jr Rodriguez
Cesar Jr Rodriguez

Reputation: 1821

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

It works!

Upvotes: 3

guest271314
guest271314

Reputation: 1

Try removing muted attribute using .removeAttr(), .clone() original jQuery object, replacing original <video> element with cloned element with .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" />

Upvotes: -1

Related Questions