1

Quisiera ver si me pueden ayudar con un par de preguntas.

La primera necesito hacer algo parecido a esto:

introducir la descripción de la imagen aquí

Es un botón para iniciar un vídeo.

Este es mi código del vídeo, en la etiqueta src ingreso la ruta del vídeo.

<video width="640" height="480" controls id="content_video preload="auto">
<source src=""></source>
</video>

Mi segunda pregunta es que si se puede modificar el atributo controls para quitar la opción de descargar el vídeo.

introducir la descripción de la imagen aquí

1
  • 1
    No entiendo su inquietud, ¿qué error o qué es lo que desea lograr? editar su pregunta con mas detalles. Commented el 23 mar. 2018 a las 22:58

1 respuesta 1

3

Te dejo el código que preparé en base a lo que necesitas:

$('.custom-play').click(function() {
  $(this).hide();
  $('#video').get(0).play();
});
.custom-play {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url(../images/button-play.png) center center no-repeat
}

 
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>

<!-- HTML -->
<div id="freq-content">
  <video id="video" width="320" height="240" controls controlsList="nodownload">
    <source src="http://html5facil.com/demos/videos/big_buck_bunny.webm"  type='video/webm; codecs="vp8, vorbis"'>
    <source src="http://html5facil.com/demos/videos/big_buck_bunny.mp4" type='video/mp4; codecs="avc1,mp4a"'>
  </video>
  <br />
  <div class="custom-play"> </div>
</div>
</div>

También dejo el link a JSFiddle por si gustas probar el código:

https://jsfiddle.net/eccu8m24/23/

Para el botón de inicio puedes colocar una imagen a tu gusto, una vez que el usuario de click dentro del video se empezará a reproducir.

En cuanto a tu pregunta de "remover el botón descargar" solo necesitas agregar el atributo controlsList="nodownload" para que no se muestre:

<video id="video" width="320" height="240" controls controlsList="nodownload">
6
  • Gracias me sirvió a la perfección
    – JesusSnd_
    Commented el 24 mar. 2018 a las 0:13
  • Que bueno que haya sido de utilidad, saludos. Commented el 24 mar. 2018 a las 0:17
  • 2
    Me ganaste la respuesta. Estaba desarrollando algo más largo, pero que va xD, en fin, una observación: El atributo controlsList está disponible desde Chrome 58 en adelante, y de momento solo compatible con Chrome y Opera (MDN docs, en inglés). Si se quisiera una solución para Firefox/IE/Safari u otros, se tendría que crear una barra de controles personalizada. Commented el 24 mar. 2018 a las 0:39
  • 2
    @BDOM Te recomiendo que pegues el código en la propia respuesta (Cntrl+M). Así, en caso de que un día dejara de funcionar jsfiddle, la respuesta seguiría siendo válida. Commented el 24 mar. 2018 a las 9:51
  • 1
    @BDOM claro, cualquier enlace que sirva viene bien (no es un problema de tener un enlace a otra web, al contrario, es poder tener una respuesta completa)... Tené en cuenta que cuando es código JavaScript se puede usar un snippet
    – Mariano
    Commented el 27 mar. 2018 a las 15:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.