I've implemented an iframe inside my webpage, the iframe points to another domain to catch the video content.

Nothing fancy inside my webpage, the iframe is standard aswell:

<iframe id='frame' src='domain.com/stream/324/index.m3u8' width='100%' allow='autoplay; encrypted media' frameborder='0' allowfullscreen></iframe>

I would like to add buttons outside the iframe to mute or unmute the video, even though the presence of the player's controllers.

How can I achieve this?

CodePudding user response：

Don't use the <iframe> tag for videos. Instead, use the HTML5 <video> tag. With a <video> tag you can set the muted attribute. You can rewrite your <iframe> like this:

<video id="video" controls width="100%" src="domain.com/stream/324/index.m3u8"></video>

You can then create a button and add an event listener to mute and unmute the <video> tag. Like this:

<button onclick="document.getElementById('video').muted = true">Mute</button>
<button onclick="document.getElementById('video').muted = false">Unmute</button>