Foros del Web » Programando para Internet » Jquery »

Galería swipebox no me funciona con YouTube ni en local

 Estas en el tema de Galería swipebox no me funciona con YouTube ni en local en el foro de Jquery en Foros del Web. Buenos días 1. Pregunta: Deseo agregar otros formatos a la galería en la documentación explican que para agregar otros formatos se debe agregar esta línea ...
  #1 (permalink)  
Antiguo 10/10/2019, 10:52
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 21 años, 8 meses
Puntos: 9
Pregunta Galería swipebox no me funciona con YouTube ni en local
Buenos días
1. Pregunta: Deseo agregar otros formatos a la galería en la documentación explican que para agregar otros formatos se debe agregar esta línea (lo tomé de acá):

Código Javascript: 
Ver original
  1. src.match(/mp4|wmv|wma|ogv|ogg|flv/)

¿Así cómo la agregué esta correcto?

Código Javascript: 
Ver original
  1. isVideo : function (src){
  2. if( src ){
  3. if( 
  4. src.match(/youtube\.com\/watch\?v=([a-zA-Z0-9\-_]+)/) 
  5. || src.match(/vimeo\.com\/([0-9]*)/) || src.match(/mp4|wmv|wma|ogv|ogg|flv/)
  6. ){
  7. return true;
  8.                     }
  9.                 }
  10.                     
  11.             },

2. Pregunta: Por otro lado intento cargar videos de YouTube así:

Código HTML: 
Ver original
  1. <div class="galeria">   
  2. <a class="swipebox-video" rel="youtube" href="http://www.youtube.com/watch?v=jK3q0DmN88s" title="texto">
  3. <img src="images/caratulas_musica/caratula_01.jpg" alt="texto" >
  4. </a>
  5. </div>

Pero no carga, pero si cargo un video de VIMEO si funciona.

¿Cómo hago para cargar videos de YouTube?

3. pregunta: no logro cargar videos en local.

Cambio este código:

Código Javascript: 
Ver original
  1. if ( src.match( /youtube\.com\/watch\?v=([a-zA-Z0-9\-_]+)/) || src.match( /vimeo\.com\/([0-9]*)/ ) || src.match( /youtu\.be\/([a-zA-Z0-9\-_]+)/ ) ) {
  2.                         return true;
  3.                     }
  4.  
  5.                     if (src.toLowerCase().indexOf( "swipeboxvideo=1" ) >= 0){
  6.  
  7.                         return true;
  8.                     }
  9.                 }
  10.  
  11.             },

Por este:

Código Javascript: 
Ver original
  1. if ( src.match( /youtube\.com\/watch\?v=([a-zA-Z0-9\-_]+)/) || src.match( /vimeo\.com\/([0-9]*)/ ) || src.match( /youtu\.be\/([a-zA-Z0-9\-_]+)/ ) ) {
  2.                         return true;
  3.                     }
  4.  
  5.                     if (src.toLowerCase().indexOf( "swipeboxvideo=1" ) >= 0){
  6.  
  7.                         return true;
  8.                     }
  9.                 }
  10.  
  11.             },

Pero no me funciona (esto lo tomé d acá).

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario
  #2 (permalink)  
Antiguo 16/10/2019, 09:41
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 21 años, 8 meses
Puntos: 9
Respuesta: Galería swipebox no me funciona con YouTube ni en local
Hola de nuevo
Sigo intentando que me cargue en local videos con formato mp4 pero no me funciona.
Yo sigo las instrucciones que da "carlosjosedesign" pero no me funciona. Así lo puse:

Código Javascript: 
Ver original
  1. isVideo : function (src){
  2.  
  3.                 if( src ){
  4.                     if(
  5.                         src.match(/youtube\.com\/watch\?v=([a-zA-Z0-9\-_]+)/)
  6.                         || src.match(/vimeo\.com\/([0-9]*)/)
  7.                         || src.match('://(www.)?dailymotion\.com')
  8.                         || src.match(/mp4|wmv|wma|ogv|ogg|flv/)
  9.                     ){
  10.                         return true;
  11.                     }
  12.                 }
  13.  
  14.             },

Agregué esta linea:

Código Javascript: 
Ver original
  1. src.match(/mp4|wmv|wma|ogv|ogg|flv/)

Código Javascript: 
Ver original
  1. getVideo : function(url){
  2.                 
  3. var normalvideoUrl=url.match(/uploads\/([a-zA-Z0-9\-_/.*]+)/)
  4.                 
  5.                 var success = false;
  6.                 if (url.match('://(www.)?youtube|youtu\.be')) {
  7.                     if (url.match('embed')) { youtube_id = url.split(/embed\//)[1].split('"')[0]; }
  8.                     else { youtube_id = url.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0]; }
  9.                     v_id    = youtube_id;
  10.                     i_src = "http://www.youtube.com/embed/"+v_id+"?controls=1&color=white&showinfo=0&autoplay=1&hd=1&fs=1&rel=0";
  11.                     success = true;
  12.                 }
  13.                 else if (url.match('://(player.)?vimeo\.com')) {
  14.                     vimeo_Reg = /https?:\/\/(?:www\.)?vimeo.com\/(?:channels\/|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|)(\d+)(?:$|\/|\?)/;
  15.                     match = url.match(vimeo_Reg);
  16.                     v_id = match[3];
  17.                     i_src = "http://player.vimeo.com/video/"+v_id+"?title=0&byline=0&portrait=0&color=ffffff&autoplay=1";
  18.                     success = true;
  19.                 }
  20.                 else if (url.match('://(www.)?dailymotion\.com')) {
  21.                     m = url.match(/^.+dailymotion.com\/((video|hub)\/([^_]+))?[^#]*(#video=([^_&]+))?/);
  22.                     v_id = m ? m[5] || m[3] : null;
  23.                     i_src = "http://www.dailymotion.com/embed/video/"+v_id+"?autoplay=true&background=000000&foreground=ffffff&highlight=ffffff";
  24.                     success = true;
  25.                 }
  26.                 else if(normalvideoUrl){  iframe= '<video class="wp-video-shortcode" width="560" height="315" preload="metadata" autoplay="autoplay" controls="controls"><source type="video/mp4" src="/wp-content/uploads/'+normalvideoUrl[1]+'"></video>'}
  27.                 }
  28.                 if (success) {
  29.                     iframe = '<iframe width="560" height="315"  src="'+i_src+'" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
  30.                     return '<div class="swipebox-video-container" style="max-width:'+plugin.settings.videomaxWidth+'px"><div class="swipebox-video">'+iframe+'</div></div>';}
  31.                 },

Y acá estas dons nuevas líneas:

Código Javascript: 
Ver original
  1. var normalvideoUrl=url.match(/uploads\/([a-zA-Z0-9\-_/.*]+)/)

Código Javascript: 
Ver original
  1. else if(normalvideoUrl){  iframe= '<video class="wp-video-shortcode" width="560" height="315" preload="metadata" autoplay="autoplay" controls="controls"><source type="video/mp4" src="/wp-content/uploads/'+normalvideoUrl[1]+'"></video>'}

Pero no me funciona los videos en local mp4

¿Cómo debo hacer para que me funcione?

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario
  #3 (permalink)  
Antiguo 16/10/2019, 12:04
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 17 años, 8 meses
Puntos: 1146
Respuesta: Galería swipebox no me funciona con YouTube ni en local
Prueba cambiar de librería, yo uso fancybox 3

https://www.fancyapps.com/fancybox/3/

Me ha funcionado sin problemas

También considera que no todos los navegadores soportan MP4, hay que cargar el formato correcto según el navegador, prueba con esta estructura... aunque veo que estas usando wordpress, puede ser un poco liado, lo mejor es crearte un shortcode para agregar este código.

Código HTML: 
Ver original
  1. <video controls="" id="myVideo" style="display: none;" class="fancybox-video" width="640" height="320">
  2.             <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4">
  3.             <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm" type="video/webm">
  4.             <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.ogv" type="video/ogg">
  5.             Your browser doesn't support HTML5 video tag.
  6.         </video>
  #4 (permalink)  
Antiguo 16/10/2019, 12:56
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 21 años, 8 meses
Puntos: 9
Respuesta: Galería swipebox no me funciona con YouTube ni en local
Hola ArturoGallegos
Si, es una alternativa si no logro que me cargue los videos .mp4.
Te cuento que yo no utilizo "wordpress" es un .HTML si no que vi que en el foro de ayuda alguien daba una respuesta a ese problema así:

Cita:
This work for me:
in swipebox/jquery.swipebox.min.js

add src.match into "isVideo:function(src)"

src.match(/mp4|wmv|wma|ogv|ogg|flv/)
this new var into "getVideo:function(url)"

var normalvideoUrl=url.match(/uploads\/([a-zA-Z0-9\-_/.*]+)/)
and a new " else if(normalvideoUrl){ }" [after if(youtubeUrl) and else if(vimeoUrl) ]

else if(normalvideoUrl){ iframe= '<video class="wp-video-shortcode" width="560" height="315" preload="metadata" autoplay="autoplay" controls="controls"><source type="video/mp4" src="/wp-content/uploads/'+normalvideoUrl[1]+'"></video>'}
replace "/uploads" and "/wp-content/" (wordpress default) for each case
autoplay="autoplay" is optional

in css file add ",#swipebox-slider .slide .swipebox-video-container .swipebox-video video" in line "#swipebox-slider .slide .swipebox-video-container .swipebox-video iframe"
por: carlosjosedesign

Yo lo que hice fue agregar:

Código Javascript: 
Ver original
  1. isVideo : function (src){
  2.  
  3.                 if( src ){
  4.                     if(
  5.                         src.match(/youtube\.com\/watch\?v=([a-zA-Z0-9\-_]+)/)
  6.                         || src.match(/vimeo\.com\/([0-9]*)/)
  7.                         || src.match('://(www.)?dailymotion\.com')
  8.                         || src.match(/mp4|wmv|wma|ogv|ogg|flv/)
  9.                     ){
  10.                         return true;
  11.                     }
  12.                     
  13.                     if (src.toLowerCase().indexOf( "swipeboxvideo=1" ) >= 0){
  14.  
  15.                         return true;
  16.                     }
  17.                 }
  18.  
  19.             },

Agregué este código:
|| src.match(/mp4|wmv|wma|ogv|ogg|flv/)

Código Javascript: 
Ver original
  1. getVideo : function(url){
  2.                 
  3. [COLOR="red"][B]var normalvideoUrl=url.match(/uploads\/([a-zA-Z0-9\-_/.*]+)/)[/B][/COLOR]
  4.                 
  5.                 var success = false;
  6.                 if (url.match('://(www.)?youtube|youtu\.be')) {
  7.                     if (url.match('embed')) { youtube_id = url.split(/embed\//)[1].split('"')[0]; }
  8.                     else { youtube_id = url.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0]; }
  9.                     v_id    = youtube_id;
  10.                     i_src = "http://www.youtube.com/embed/"+v_id+"?controls=1&color=white&showinfo=0&autoplay=1&hd=1&fs=1&rel=0";
  11.                     success = true;
  12.                 }
  13.                 else if (url.match('://(player.)?vimeo\.com')) {
  14.                     vimeo_Reg = /https?:\/\/(?:www\.)?vimeo.com\/(?:channels\/|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|)(\d+)(?:$|\/|\?)/;
  15.                     match = url.match(vimeo_Reg);
  16.                     v_id = match[3];
  17.                     i_src = "http://player.vimeo.com/video/"+v_id+"?title=0&byline=0&portrait=0&color=ffffff&autoplay=1";
  18.                     success = true;
  19.                 }
  20.                 else if (url.match('://(www.)?dailymotion\.com')) {
  21.                     m = url.match(/^.+dailymotion.com\/((video|hub)\/([^_]+))?[^#]*(#video=([^_&]+))?/);
  22.                     v_id = m ? m[5] || m[3] : null;
  23.                     i_src = "http://www.dailymotion.com/embed/video/"+v_id+"?autoplay=true&background=000000&foreground=ffffff&highlight=ffffff";
  24.                     success = true;
  25.                 }
  26.                 else if(normalvideoUrl){  iframe= '<video class="wp-video-shortcode" width="560" height="315" preload="metadata" autoplay="autoplay" controls="controls"><source type="video/mp4" src="/wp-content/uploads/'+normalvideoUrl[1]+'"></video>'}
  27.                 }
  28.                 if (success) {
  29.                     iframe = '<iframe width="560" height="315"  src="'+i_src+'" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
  30.                     return '<div class="swipebox-video-container" style="max-width:'+plugin.settings.videomaxWidth+'px"><div class="swipebox-video">'+iframe+'</div></div>';}
  31.                 },

Agregué este código:

else if(normalvideoUrl){ iframe= '<video class="wp-video-shortcode" width="560" height="315" preload="metadata" autoplay="autoplay" controls="controls"><source type="video/mp4" src="/wp-content/uploads/'+normalvideoUrl[1]+'"></video>'}
}

Pero igual no me funcionó.
¿Sí esta bien como agregué ese código?

Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario
Última edición por ceaped; 16/10/2019 a las 13:00 Razón: Cambiar texto y corregirlo
  #5 (permalink)  
Antiguo 19/10/2019, 10:58
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 21 años, 8 meses
Puntos: 9
Respuesta: Galería swipebox no me funciona con YouTube ni en local
Buenos días
Sigo tratando que se vean videos en local .mp4 pero no logro hacerlo y la documentación que hay del tema es muy poca.

¿Alguien que sepa cómo hacerlo?

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario
  #6 (permalink)  
Antiguo 21/10/2019, 08:22
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 21 años, 8 meses
Puntos: 9
Respuesta: Galería swipebox no me funciona con YouTube ni en local
Buenos días
Encontré algo en este enlace:

swipebox con videos mp4

Reemplazo el código pero no me funciona.

¿Cómo se debería ajustar el código con este código?

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario

Etiquetas: local, youtube
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 10:49.