Cómo bloquear el botón de descarga en un reproductor HTML5

jzucchet · 6 Mar 2017

Buenas noches comunidad, quisiera saber si hay alguna forma de poder bloquear el boton de descarga en los reproductores html5? Gracias de antemano.

lejovaar7 · 6 Mar 2017

quitar el atributo controls y usar js para crear los controles.

yquintero · 6 Mar 2017

preload:none hay que declarar a preload como none.

AlexxxBcN · 6 Mar 2017

Alguien conoce algun reproductor html 5 ?
gracias

jzucchet · 6 Mar 2017

lejovaar7 dijo:
quitar el atributo controls y usar js para crear los controles.

Insertar CODE, HTML o PHP:

<title>HTML5 Audio Player </title>    
    <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->    
    <!--  <meta http-equiv="X-UA-Compatible" content="IE=9"/> -->  
    <script type="text/javascript">
        // Global variable to track current file name.
        var currentFile = "";
        function playAudio() {
            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    var btn = document.getElementById('play'); 
                    var audioURL = document.getElementById('audiofile'); 

                    //Skip loading if current file hasn't changed.
                    if (audioURL.value !== currentFile) {
                        oAudio.src = audioURL.value;
                        currentFile = audioURL.value;                       
                    }

                    // Tests the paused attribute and set state. 
                    if (oAudio.paused) {
                        oAudio.play();
                        btn.textContent = "Pause";
                    }
                    else {
                        oAudio.pause();
                        btn.textContent = "Play";
                    }
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }
             // Rewinds the audio file by 30 seconds.

        function rewindAudio() {
             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime -= 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }

             // Fast forwards the audio file by 30 seconds.

        function forwardAudio() {

             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime += 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }

             // Restart the audio file to the beginning.

        function restartAudio() {
             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime = 0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
               }
            }
        }
            
    </script>
  </head>
  
  <body>
    <p>
      <input type="text" id="audiofile" size="80" value="demo.mp3" />
    </p>
    <audio id="myaudio">
      HTML5 audio not supported
    </audio>
    <button id="play" onclick="playAudio();">
      Play
    </button>
    
    <button onclick="rewindAudio();">
      Rewind
    </button>
    <button onclick="forwardAudio();">
      Fast forward
    </button>
    <button onclick="restartAudio();">
      Restart
    </button>

Eso estaría bien?

- - - Actualizado - - -

yquintero dijo:
preload:none hay que declarar a preload como none.

Probé si bien no muestra el logo de descarga estando el reproductor quieto, pero cuando le das play si lo muestra.

lejovaar7 · 6 Mar 2017

jzucchet dijo:

Insertar CODE, HTML o PHP:

<title>HTML5 Audio Player </title>    
    <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->    
    <!--  <meta http-equiv="X-UA-Compatible" content="IE=9"/> -->  
    <script type="text/javascript">
        // Global variable to track current file name.
        var currentFile = "";
        function playAudio() {
            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    var btn = document.getElementById('play'); 
                    var audioURL = document.getElementById('audiofile'); 

                    //Skip loading if current file hasn't changed.
                    if (audioURL.value !== currentFile) {
                        oAudio.src = audioURL.value;
                        currentFile = audioURL.value;                       
                    }

                    // Tests the paused attribute and set state. 
                    if (oAudio.paused) {
                        oAudio.play();
                        btn.textContent = "Pause";
                    }
                    else {
                        oAudio.pause();
                        btn.textContent = "Play";
                    }
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }
             // Rewinds the audio file by 30 seconds.

        function rewindAudio() {
             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime -= 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }

             // Fast forwards the audio file by 30 seconds.

        function forwardAudio() {

             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime += 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }

             // Restart the audio file to the beginning.

        function restartAudio() {
             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime = 0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
               }
            }
        }
            
    </script>
  </head>
  
  <body>
    <p>
      <input type="text" id="audiofile" size="80" value="demo.mp3" />
    </p>
    <audio id="myaudio">
      HTML5 audio not supported
    </audio>
    <button id="play" onclick="playAudio();">
      Play
    </button>
    
    <button onclick="rewindAudio();">
      Rewind
    </button>
    <button onclick="forwardAudio();">
      Fast forward
    </button>
    <button onclick="restartAudio();">
      Restart
    </button>

Eso estaría bien?

- - - Actualizado - - -

Probé si bien no muestra el logo de descarga estando el reproductor quieto, pero cuando le das play si lo muestra.

prueba este framework: Video.js: The Player Framework. lee la docs. otra cosa es que cuando le den click derecho va a salir "guardar video como". pero puedes bloquear el click derecho y solucionado.

- - - Actualizado - - -

jzucchet dijo:

Insertar CODE, HTML o PHP:

<title>HTML5 Audio Player </title>    
    <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->    
    <!--  <meta http-equiv="X-UA-Compatible" content="IE=9"/> -->  
    <script type="text/javascript">
        // Global variable to track current file name.
        var currentFile = "";
        function playAudio() {
            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    var btn = document.getElementById('play'); 
                    var audioURL = document.getElementById('audiofile'); 

                    //Skip loading if current file hasn't changed.
                    if (audioURL.value !== currentFile) {
                        oAudio.src = audioURL.value;
                        currentFile = audioURL.value;                       
                    }

                    // Tests the paused attribute and set state. 
                    if (oAudio.paused) {
                        oAudio.play();
                        btn.textContent = "Pause";
                    }
                    else {
                        oAudio.pause();
                        btn.textContent = "Play";
                    }
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }
             // Rewinds the audio file by 30 seconds.

        function rewindAudio() {
             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime -= 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }

             // Fast forwards the audio file by 30 seconds.

        function forwardAudio() {

             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime += 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }

             // Restart the audio file to the beginning.

        function restartAudio() {
             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime = 0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
               }
            }
        }
            
    </script>
  </head>
  
  <body>
    <p>
      <input type="text" id="audiofile" size="80" value="demo.mp3" />
    </p>
    <audio id="myaudio">
      HTML5 audio not supported
    </audio>
    <button id="play" onclick="playAudio();">
      Play
    </button>
    
    <button onclick="rewindAudio();">
      Rewind
    </button>
    <button onclick="forwardAudio();">
      Fast forward
    </button>
    <button onclick="restartAudio();">
      Restart
    </button>

Eso estaría bien?

- - - Actualizado - - -

Probé si bien no muestra el logo de descarga estando el reproductor quieto, pero cuando le das play si lo muestra.

prueba este framework: Video.js: The Player Framework. lee la docs. otra cosa es que cuando le den click derecho va a salir "guardar video como". pero puedes bloquear el click derecho y solucionado.

jzucchet · 6 Mar 2017

lejovaar7 dijo:
prueba este framework: Video.js: The Player Framework. lee la docs. otra cosa es que cuando le den click derecho va a salir "guardar video como". pero puedes bloquear el click derecho y solucionado.

- - - Actualizado - - -

prueba este framework: Video.js: The Player Framework. lee la docs. otra cosa es que cuando le den click derecho va a salir "guardar video como". pero puedes bloquear el click derecho y solucionado.

Por lo que veo eso es para vídeo, y yo anda precisando para audio.

lejovaar7 · 6 Mar 2017

jzucchet dijo:
Por lo que veo eso es para vídeo, y yo anda precisando para audio.

mira este: audio.js . en github hay varios.

jzucchet · 6 Mar 2017

lejovaar7 dijo:
mira este: audio.js . en github hay varios.

Ya! Gracias por la info. Saludos!

lejovaar7 · 6 Mar 2017

jzucchet dijo:
Ya! Gracias por la info. Saludos!

De nada. Igualmente puedes crearlo sin librería o framework. pero estos facilitan todo.

jzucchet · 19 Mar 2017

Buenas noches, tengo una consulta, he implementado el reproductor que me dijo [MENTION=158112]lejovaar7[/MENTION] pero no muestra el botón play, he intentado cambiándole el nombre a la imagen poniendo dirección completa del archivo imagen en el .js y aún así no me lo lee. Alguien tendría idea de como solucionar eso?

lejovaar7 · 19 Mar 2017

¿puede mostrar tu script?.

jzucchet · 20 Mar 2017

http://one-la.com/repro/audio.min.js Esta aquí iba a pasar captura pero no me deja por el tamaño de la foto.

Cómo bloquear el botón de descarga en un reproductor HTML5

jzucchet

lejovaar7

yquintero

AlexxxBcN

jzucchet

lejovaar7

jzucchet

lejovaar7

jzucchet

lejovaar7

jzucchet

lejovaar7

jzucchet

Temas similares

Privacidad y transparencia

Privacidad y transparencia