Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] problema al incrustar un segundo video con CSS + SCRIPT

 Estas en el tema de problema al incrustar un segundo video con CSS + SCRIPT en el foro de Javascript en Foros del Web. Hola amigos, gracias por vuestro tiempo Estoy utilizando este código: DIV: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código PHP: Ver original < div class = "video-wrapper" >     ...
  #1 (permalink)  
Antiguo 22/09/2016, 07:08
 
Fecha de Ingreso: octubre-2007
Mensajes: 74
Antigüedad: 17 años
Puntos: 1
Pregunta problema al incrustar un segundo video con CSS + SCRIPT
Hola amigos, gracias por vuestro tiempo

Estoy utilizando este código:

DIV:

Código PHP: 
Ver original
  1. <div class="video-wrapper">
  2.     <video src="//clips.vorwaerts-gmbh.de/VfE_html5.mp4" poster="//s3-us-west-2.amazonaws.com/s.cdpn.io/3174/poster.png"></video>
  3. </div>

CSS:

Código CSS: 
Ver original
  1. .video-wrapper {
  2.     position: relative;
  3. }
  4.  
  5. .video-wrapper > video {
  6.     width: 100%;
  7.     vertical-align: middle;
  8. }
  9.  
  10. .video-wrapper > video.has-media-controls-hidden::-webkit-media-controls {
  11.     display: none;
  12. }
  13.  
  14. .video-overlay-play-button {
  15.     box-sizing: border-box;
  16.     width: 100%;
  17.     height: 100%;
  18.     padding: 10px calc(50% - 50px);
  19.     position: absolute;
  20.     top: 0;
  21.     left: 0;
  22.     display: block;
  23.     opacity: 0.95;
  24.     cursor: pointer;
  25.     background-image: linear-gradient(transparent, #000);
  26.     transition: opacity 150ms;
  27. }
  28.  
  29. .video-overlay-play-button:hover {
  30.     opacity: 1;
  31. }
  32.  
  33. .video-overlay-play-button.is-hidden {
  34.     display: none;
  35. }


SCRIPT:

Código Javascript: 
Ver original
  1. var videoPlayButton,
  2.     videoWrapper = document.getElementsByClassName('video-wrapper')[0],
  3.     video = document.getElementsByTagName('video')[0],
  4.     videoMethods = {
  5.         renderVideoPlayButton: function() {
  6.             if (videoWrapper.contains(video)) {
  7.                 this.formatVideoPlayButton()
  8.                 video.classList.add('has-media-controls-hidden')
  9.                 videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]
  10.                 videoPlayButton.addEventListener('click', this.hideVideoPlayButton)
  11.             }
  12.         },
  13.  
  14.         formatVideoPlayButton: function() {
  15.             videoWrapper.insertAdjacentHTML('beforeend', '\
  16.                 <svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">\
  17.                     <circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"/>\
  18.                     <polygon points="70, 55 70, 145 145, 100" fill="#fff"/>\
  19.                 </svg>\
  20.             ')
  21.         },
  22.  
  23.         hideVideoPlayButton: function() {
  24.             video.play()
  25.             videoPlayButton.classList.add('is-hidden')
  26.             video.classList.remove('has-media-controls-hidden')
  27.             video.setAttribute('controls', 'controls')
  28.         }
  29.     }
  30.  
  31. videoMethods.renderVideoPlayButton()


Funciona perfecto, es lo que estaba buscando, con un botón de play en medio.

El problema me surge al incrustar un segundo video en el mismo php, el primero continua funcionando, pero el segundo no... Pongo el mismo código lo único que varia es la dirección del mp4 (y son correctas).

Ejemplo:


Código PHP: 
Ver original
  1. <div class="col-sm-7">
  2.  
  3. <div class="video-wrapper">
  4. <video src="media/video/ejemplo1.mp4" poster="media/img/ejemplo1.jpg"></video>
  5. </div>
  6.  
  7. </div>
  8.  
  9. ...
  10.  
  11. ...
  12.  
  13. ...
  14.  
  15. <div class="col-sm-7">
  16.  
  17. <div class="video-wrapper">
  18. <video src="media/video/ejemplo2.mp4" poster="media/img/ejemplo2.jpg"></video>
  19. </div>
  20.  
  21. </div>


que puede ser???? Mil gracias de nuevo
Última edición por txemaker; 22/09/2016 a las 08:19
  #2 (permalink)  
Antiguo 22/09/2016, 08:25
 
Fecha de Ingreso: noviembre-2015
Mensajes: 231
Antigüedad: 9 años
Puntos: 86
Respuesta: problema al incrustar un segundo video con CSS + SCRIPT
El método getElementsByClassName retorna un classList y para acceder a cada elemento se usa un índice. Cómo puedes ver, en tu código, el índice es 0. Esto quiere decir que cualquier cosa que se haga sólo afectara al primer elemento.

La solución es usar el método querySelectorAll(), por que getElementsByClassName() está obsoleto, y recorrer el la colección de elementos con un ciclo (for o forEach)
  #3 (permalink)  
Antiguo 22/09/2016, 09:31
 
Fecha de Ingreso: octubre-2007
Mensajes: 74
Antigüedad: 17 años
Puntos: 1
Respuesta: problema al incrustar un segundo video con CSS + SCRIPT
Cita:
Iniciado por mpozo Ver Mensaje
El método getElementsByClassName retorna un classList y para acceder a cada elemento se usa un índice. Cómo puedes ver, en tu código, el índice es 0. Esto quiere decir que cualquier cosa que se haga sólo afectara al primer elemento.

La solución es usar el método querySelectorAll(), por que getElementsByClassName() está obsoleto, y recorrer el la colección de elementos con un ciclo (for o forEach)


hola mpozo gracias por responder... disculpa, es que estoy limitado en javascript.... he probado con esto:


Código Javascript: 
Ver original
  1. var videoPlayButton,
  2.     videoWrapper = document.querySelectorAll()('video-wrapper'),
  3.     video = document.querySelectorAll()('video'),
  4.     videoMethods = {
  5.         renderVideoPlayButton: function() {
  6.             if (videoWrapper.contains(video)) {
  7.                 this.formatVideoPlayButton()
  8.                 video.classList.add('has-media-controls-hidden')
  9.                 videoPlayButton = document.querySelectorAll()('video-overlay-play-button')
  10.                 videoPlayButton.addEventListener('click', this.hideVideoPlayButton)
  11.             }
  12.         },
  13.  
  14.         formatVideoPlayButton: function() {
  15.             videoWrapper.insertAdjacentHTML('beforeend', '\
  16.                 <svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">\
  17.                     <circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"/>\
  18.                     <polygon points="70, 55 70, 145 145, 100" fill="#fff"/>\
  19.                 </svg>\
  20.             ')
  21.         },
  22.  
  23.         hideVideoPlayButton: function() {
  24.             video.play()
  25.             videoPlayButton.classList.add('is-hidden')
  26.             video.classList.remove('has-media-controls-hidden')
  27.             video.setAttribute('controls', 'controls')
  28.         }
  29.     }
  30.  
  31. videoMethods.renderVideoPlayButton()


pero no funciona en ninguno... por favor, podrias ponerme el script completo??? mil gracias de verdad...

te pongo de nuevo el script original


Código Javascript: 
Ver original
  1. var videoPlayButton,
  2.     videoWrapper = document.getElementsByClassName('video-wrapper')[0],
  3.     video = document.getElementsByTagName('video')[0],
  4.     videoMethods = {
  5.         renderVideoPlayButton: function() {
  6.             if (videoWrapper.contains(video)) {
  7.                 this.formatVideoPlayButton()
  8.                 video.classList.add('has-media-controls-hidden')
  9.                 videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]
  10.                 videoPlayButton.addEventListener('click', this.hideVideoPlayButton)
  11.             }
  12.         },
  13.  
  14.         formatVideoPlayButton: function() {
  15.             videoWrapper.insertAdjacentHTML('beforeend', '\
  16.                 <svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">\
  17.                     <circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"/>\
  18.                     <polygon points="70, 55 70, 145 145, 100" fill="#fff"/>\
  19.                 </svg>\
  20.             ')
  21.         },
  22.  
  23.         hideVideoPlayButton: function() {
  24.             video.play()
  25.             videoPlayButton.classList.add('is-hidden')
  26.             video.classList.remove('has-media-controls-hidden')
  27.             video.setAttribute('controls', 'controls')
  28.         }
  29.     }
  30.  
  31. videoMethods.renderVideoPlayButton()
  #4 (permalink)  
Antiguo 23/09/2016, 03:37
 
Fecha de Ingreso: octubre-2007
Mensajes: 74
Antigüedad: 17 años
Puntos: 1
Respuesta: problema al incrustar un segundo video con CSS + SCRIPT
por favor alguien puede ayudarme? gracias
  #5 (permalink)  
Antiguo 23/09/2016, 06:33
 
Fecha de Ingreso: noviembre-2015
Mensajes: 231
Antigüedad: 9 años
Puntos: 86
Respuesta: problema al incrustar un segundo video con CSS + SCRIPT
No seas impaciente! Los demás también tenemos cosas que hacer
Código Javascript: 
Ver original
  1. var videoMethods = {
  2.  
  3.     videoWrapper: document.querySelectorAll('.video-wrapper'),
  4.     video: document.querySelectorAll('video'),
  5.  
  6.         renderVideoPlayButton: function() {
  7.           Array.prototype.forEach.call(this.videoWrapper, function(el, i) {
  8.             if (el.contains(videoMethods.video[i])) {
  9.                 videoMethods.formatVideoPlayButton(el)
  10.                 videoMethods.video[i].classList.add('has-media-controls-hidden')
  11.                 document.querySelectorAll('.video-overlay-play-button')[i].addEventListener('click', function() {this.hideVideoPlayButton(this, videoMethods.video[i])})
  12.             }
  13.           })
  14.             
  15.         },
  16.  
  17.         formatVideoPlayButton: function(vWrapper) {
  18.             return vWrapper.insertAdjacentHTML('beforeend', '\
  19.                 <svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">\
  20.                     <circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"/>\
  21.                     <polygon points="70, 55 70, 145 145, 100" fill="#fff"/>\
  22.                 </svg>\
  23.             ')
  24.         },
  25.  
  26.         hideVideoPlayButton: function(vpb, v) {
  27.             v.play()
  28.             vpb.classList.add('is-hidden')
  29.             v.classList.remove('has-media-controls-hidden')
  30.             v.setAttribute('controls', 'controls')
  31.         }
  32.     }
  33.  
  34.  
  35. videoMethods.renderVideoPlayButton()
  #6 (permalink)  
Antiguo 23/09/2016, 15:38
 
Fecha de Ingreso: octubre-2007
Mensajes: 74
Antigüedad: 17 años
Puntos: 1
Respuesta: problema al incrustar un segundo video con CSS + SCRIPT
Cita:
Iniciado por mpozo Ver Mensaje
No seas impaciente! Los demás también tenemos cosas que hacer
Disculpame tienes toda la razon :) mil gracias mpozo de verdad me has solucionado algo que llevaba dias quebrandome la cabeza.... lo siento

Muchas gracias de nuevo

Etiquetas: css, funcion, html, incrustar, php, segundo, video
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 14:28.