Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » quitar el boton de descarga de la barra de control de video en crome

JQuery - quitar el boton de descarga de la barra de control de video en crome

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

quitar el boton de descarga de la barra de control de video en crome

Publicado por hector (6 intervenciones) el 01/06/2017 12:31:42
Hola a todos, a ver si me podéis echar un cable.

Estoy haciendo un proyecto en el que tengo que insertar una serie de videos.

El problema está en que al usar el controls de html, en crome aparece un botón para descargar el video.

¿Alguien sabe como se puede desactivar?

Muchas gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de [abZeroX]
Val: 39
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

quitar el boton de descarga de la barra de control de video en crome

Publicado por [abZeroX] (14 intervenciones) el 02/06/2017 00:20:51
Hola tengo un pequeño código que quizás solucione tu problema lo hice para audio pero tal vez puedes adaptarlo para video.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Player</title>
	<style>
		.container {
		    position: relative;
		    width: 300px;
		}
 
		.mask {
			display: block;
		    background-color: #FFF;

		    position: absolute;
		    width: 34px;
		    top: 0;
		    right: 0;
		    bottom: 0;
		    z-index: 10
		}
	</style>
</head>
<body>
	<div class="container">
		<audio src="song.mp3" type="audio/mpeg" controls></audio>
		<div class="mask"></div>
	</div>
</body>
</html>

Nos comentas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de kip
Val: 141
Plata
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

quitar el boton de descarga de la barra de control de video en crome

Publicado por kip (38 intervenciones) el 02/06/2017 01:06:01
Hola, es posible hacerlo con los pseudoselectores que ofrece CSS, este seria un ejemplo:

HTML
1
2
3
<video width="100%" autoplay controls>
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>

CSS
1
2
3
4
5
6
7
8
9
10
11
video::-internal-media-controls-download-button {
    display:none;
}
 
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
 
video::-webkit-media-controls-panel {
    width: calc(100% + 25px);
}

Aunque tambien puedes usar el atributo controlist que se introdujo a partir de la version 58 de Chrome, asi:

1
2
3
<video width="100%" autoplay controls controlsList="nodownload">
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>

Mas info https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist

Aunque lo que yo veo mejor, por temas de compatibilidad, es que uses CSS para ocultarlo.

Para audio seria igual:

1
2
3
<audio autoplay controls>
  <source src="http://mus1.foxmusica.net/mp3/ccdae96d-acee-49bd-9d8c-e9a049553124.mp3" type="audio/mpeg">
</audio>

1
2
3
4
5
6
7
8
9
10
11
audio::-internal-media-controls-download-button {
    display:none;
}
 
audio::-webkit-media-controls-enclosure {
    overflow:hidden;
}
 
audio::-webkit-media-controls-panel {
    width: calc(100% + 25px);
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

quitar el boton de descarga de la barra de control de video en crome

Publicado por hector (6 intervenciones) el 02/06/2017 10:18:00
Ante todo muchísmas gracias, llevaba varios días pegándome con esto y no lo lograba.

Mediante CSS se oculta perfectamente el botón de descarga del video, pero curiosamente sigue activo, es decir si haces click al final de la barra de reproducción sigue descargando el video.

¿No debería desaparecer con display:none;?

Mil gracias de nuevo y un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de kip
Val: 141
Plata
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

quitar el boton de descarga de la barra de control de video en crome

Publicado por kip (38 intervenciones) el 02/06/2017 15:15:38
Me he equivocado en el calculo, al parecer no esta pero la accion se ejecuta al hacer click en una pequeña parte que esta visible...... algo raro no ?

Con esta modificacion ya deberia servirte:

1
2
3
video::-webkit-media-controls-panel {
    width: calc(100% + 35px);
}

Le agregue 10px mas, pruebalo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

quitar el boton de descarga de la barra de control de video en crome

Publicado por hector (6 intervenciones) el 14/06/2017 12:44:08
Muchas gracias.

funciona perfectamente.

Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

quitar el boton de descarga de la barra de control de video en crome

Publicado por Pablo (1 intervención) el 16/09/2017 16:55:27
Hola kip,

Quería saber si hay alguna manera de modificar los estilos css de la etiqueta "audio" a través de algún pseudoselector como lo hiciste con el botón de descarga?
Lo que quiero hacer es cambiarle el color de fondo, darle quizas un border-radius, cambiarle el color a los botones de "controls" y cambiarle el color al circulo del range que indica cuanto tiempo ha sonado la canción.

espero sepas algo al respecto

saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar