CODEWITHSUNDEEP
javascriptjqueryhtml
askon
askon

Reputation: 671

Multiple dynamically added HTML Videos not muting

I have a bunch of html videos being added to the dom via jquery append (HTML string)

I want them to be inserted MUTED.

The problem is, right now they're not getting muted, even when I inject them with the muted prop.

When I remove the muted attrib on the video tag, and try something like $('video').prop("muted",true); it WILL mute them, but only AFTER they have all loaded.

Do I try adding the videos another way, or find an onLoad method for the html videos and trigger a mute function when they're ready.

jsfiddle of what they look like after append: http://jsfiddle.net/mvsMG/

Upvotes: 0

Views: 293

Answers (1)

Onur Yıldırım
Onur Yıldırım

Reputation: 33634

Try onloadeddata HTML5 event handler:

$(document).ready(function(e) { //do NOT use $(window).load; it will not mute all videos
   // mute all the videos when data is loaded for each
   $('video').on('loadeddata', function(e) {
       //console.log('onloadeddata', e.target);
       $(this).prop('muted', true);
    }); 
});

Here is the demo fiddle.

Note: I don't know which browser you are testing with but you should check out this browser-support list for HTML5 muted (loop and autoplay) attributes.

Upvotes: 2

Related Questions