El video HTML5 no funcionará con el complemento jquery bxSlider en el iPad

Estoy usando el complemento Jquery bxSlider para crear una galería deslizante de imágenes y videos para el iPad. Estoy usando la etiqueta video de HTML5 para la aplicación de vídeo:El video HTML5 no funcionará con el complemento jquery bxSlider en el iPad

<video width="400" height="260" controls> 
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
</video>

código fuente de vídeo funciona bien en el iPad cuando por su propia cuenta, sin embargo, cuando se fusionó con el formato slider, el vídeo no se reproduce.

enlace de la prueba:http://www.ekimmedia.com/totem/TIC/MG/

Si quito este script:

<script src="js/jquery.bxSlider.js" type="text/javascript"></script>

partir del código fuente, el vídeo a continuación, funciona en el iPad.

prueba de enlace con la escritura bxSlider eliminado:http://www.ekimmedia.com/totem/TIC/MG/index10.html

No está seguro de lo que está causando el conflicto.

Gracias,

Fuente

2011-08-30 Joe Caplin

Los enlaces de prueba están rotos: / –

trate de ver el elemento de vídeo con una herramienta de depuración como herramientas para desarrolladores firebug o Safari. Es posible que deba usar un navegador de PC/Mac para hacer esto. Vea si el elemento de video pierde algún atributo u obtiene elementos adicionales después de ejecutar el script jquery. Después de haber hecho algunos desarrollos móviles con videos, puedo decir que es muy delicado, especialmente porque hay aproximadamente 82 mil millones de navegadores y versiones de sistema operativo diferentes flotando en los dispositivos móviles. Si ve que el elemento de video ha cambiado, necesitará agregar una secuencia de comandos que lo devuelva a algo visible en su iPad.

También puede asegurarse de que sus videos estén ajustados correctamente. Parece que este script de Slider requiere el siguiente formato:

<div id="slideshowcontainer"> 
<div>slide1 content</div> 
<div>slide2 content</div> 
<div>etc...</div> 
</div> 

OR 

<ul id="slideshowcontainer"> 
<li>slide1 content</li> 
<li>slide2 content</li> 
<li>etc...</li> 
</ul>

Fuente

2012-01-04 17:39:49 Matt

La única manera cómo consigo este control deslizante para el trabajo era para descargarlo de forma local desde el sitio web oficial bxslider. E intente seguir su tutorial sobre cómo hacer que el control deslizante de video sea receptivo. No mencionan en ninguna parte sobre estas imágenes de flecha ya que no vienen en el CSS. Por lo tanto, recuerde tomar una carpeta de imágenes del archivo comprimido bxslider descargado y pegarla en la carpeta js de su proyecto.

En mi configuración final he tenido 4 archivos locales en la carpeta js: jquery-2.2.2.min.js, jquery.bxslider.css, jquery.bxslider.js y jquery.fitvids.js. La carpeta js también incluía la subcarpeta images donde estaban controls.png y bx_loader.gif.

Todo esto fueron luego referenciados en el archivo HTML de la siguiente manera:

<head> 
    <link rel="stylesheet" href="js/jquery.bxslider.css"> 
    <script src="js/jquery-2.2.2.min.js"></script> 
    <script src="js/jquery.fitvids.js"></script> 
    <script src="js/jquery.bxslider.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
    $('.bxslider').bxSlider({ 
     video: true, 
     useCSS: false 
    }); 
    }); 
    </script> 
</head> 
<body> 
    <ul class="bxslider"> 
     <li> 
      <iframe src="YOUR_LINK_TO_VIDEO" width="400" height="260" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
     </li> 
     <li> 
      <iframe src="YOUR_LINK_TO_VIDEO" width="400" height="260" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
     </li> 
    </ul> 
</body>

He probado mi solución en el dispositivo iOS y todo parece funcionar bien. Hay algo similar solution a este problema, también puedes mirarlo.

Fuente

2016-03-29 14:48:02 alljamin

tratar de cambiar la posición de

`<script src="js/jquery.bxSlider.js" type="text/javascript"></script>`

Mi ser que es debido a la conflictividad de las bibliotecas, lo puso en medio de todas las secuencias de comandos o en la parte inferior o en cualquier lugar elc, estoy seguro de que el trabajo gona.

Fuente

2016-03-30 12:20:37

El video HTML5 no funcionará con el complemento jquery bxSlider en el iPad

Respuesta

Cuestiones relacionadas