CODEWITHSUNDEEP
javascriptgoogle-chromehtml5-video
holden321
holden321

Reputation: 1183

HTML5 video - onmuted and onloop event

How to detect the switching of muted and loop properties of a video?

There are no "onmuted" or "onloop" events, as "onplay" or "onpause", unfortunately.

Object.observe doesn't work.
MutationObserver doesn't work either.

Any suggestions would be appreciated.

Upvotes: 2

Views: 3173

Answers (1)

brianchirls
brianchirls

Reputation: 7853

1) You can detect muted with a "volumechange" event.

video.addEventListener('volumechange', function () {
    console.log('muted', video.muted);
}, false);
// video.onvolumechange = ... works too

2) MutationObserver doesn't work muted because there's no attribute for it, but it does work for loop.

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.type === 'attribute' && mutation.attributeName === 'loop') {
            console.log('loop changed', video.loop);
        }
    });
});

observer.observe(video, {
    attributes: true
});

In my testing, the observer callback fires whether you set video.loop = true with Javascript (at least in Chrome and Firefox) or with the right-click dropdown menu (not available in FF, just Chrome) on the video element.

Upvotes: 3

Related Questions