Cualquier persona con experiencia en html css me ayuda con este simple problema que no puedo resolver.

Básicamente, mi página html tiene un elemento de video que tiene un atributo src adjunto.

Ahora, lo que quiero hacer es eliminar este atributo src del elemento de video y colocar esta fuente en la clase css de ese elemento de video.

Entonces, ¿cómo puedo configurar el src del elemento de video desde css?

He intentado usar URL, atributos de contenido, pero no parece funcionar.
O tal vez lo estoy haciendo mal. Le agradecería a cualquiera que pudiera proporcionar cualquier entrada para esto o compartir un pequeño código que usaría CSS para establecer la fuente de un elemento de video html5. por favor, ayúdame. Gracias.

1
Harshit 22 feb. 2017 a las 10:30

2 respuestas

La mejor respuesta

No puede configurar la fuente de video a través de CSS. Porque ves a continuación la estructura básica del video:

<video>
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

Puede configurar otros atributos como imagen de fondo, color, etc. Sin embargo, no puede configurar la fuente a través de css, que se utiliza para diseñar el botón de reproducción y cualquier otra función de botón. Si realmente necesita hacer esto sin usar <source src="sample.mp4" type="video/mp4"></source>, tendrá que usar JavaScript.

1
stybl 17 jun. 2017 a las 01:07

Lo hice con CSS usando la pantalla configurada en none o block, para que el video ("sample.mp4" o "sample2.mp3" se reproduzca dependiendo de si el usuario está en su computadora portátil o en su móvil.

Html:

<video id='video'>
    <source src="sample.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>
<video id='video2'>
    <source src="sample2.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

Css:

#video2 {display:none;}

@media only screen and (max-width: 500px) {
    #video2 {display:block;}
    #video {display:none;}
}
0
Joseph 14 mar. 2020 a las 03:30