Implementé un iframe dentro de mi página web, el iframe apunta a otro dominio para capturar el contenido del video.
Nada elegante dentro de mi página web, el iframe también es estándar:
<iframe id='frame' src='domain.com/stream/324/index.m3u8' width='100%' allow='autoplay; encrypted media' frameborder='0' allowfullscreen></iframe>
Me gustaría agregar botones fuera del iframe para silenciar o reactivar el video , a pesar de la presencia de los controladores del reproductor.
¿Cómo puedo conseguir esto?
No use la etiqueta <iframe> para videos. En su lugar, utilice la etiqueta HTML5<video> . Con una etiqueta <video> puede establecer el atributo muted . Puedes reescribir tu <iframe> así:
<video id="video" controls width="100%" src="domain.com/stream/324/index.m3u8"></video>
Luego puede crear un botón y agregar un detector de eventos para silenciar y reactivar la etiqueta <video> . Como esto:
<button onclick="document.getElementById('video').muted = true">Mute</button>
<button onclick="document.getElementById('video').muted = false">Unmute</button>