0

Quiero mostrar un video y funciona bien en computadora, pero en android no. Busque ayuda pero no funciono.

//// Codigo

<video poster="img/videoframe.jpg" class="fullscreen-bg__video" controls>
    <source src="ejemplo.mp4" type="video/mp4">
</video>

////

1
  • ¿Podrías decirnos la salida de un ffmpeg -i ejemplo.mp4 o decirnos qué códecs de audio y vídeo usa ese archivo? Commented el 1 feb. 2018 a las 12:14

3 respuestas 3

1

El problema es que en chrome para Android nececitas un elemento que inicie el video agrega un id al elemento:

    <video id="video" poster="img/videoframe.jpg" class="fullscreen-bg__video" controls>
    <source src="ejemplo.mp4" type="video/mp4">
    </video>

y un script:

var video = document.getElementById('video');
video.addEventListener('click',function(){
  video.play();
},false);

y

7
  • Pero no quiero el autoplay, solo con que se reprodusca. O quizas no estoy entendiendo, Aparte si solo agrego el script ese, deberia de funcionar?
    – Jenio158
    Commented el 10 jul. 2017 a las 21:19
  • 1
    Acabo de descargar firefox en android y si funciona. Osea que el problema es chrome.
    – Jenio158
    Commented el 10 jul. 2017 a las 21:28
  • Es que en chrome para android debes llamar a la funcion video.play() de esta manera asi lo diseño google Commented el 10 jul. 2017 a las 21:29
  • Pegue ese script pero no funciona, le tengo que agregar algo mas? Porque la verdad no entiendo script solo html.
    – Jenio158
    Commented el 11 jul. 2017 a las 1:03
  • añadiste el id en el elemento video? Commented el 12 jul. 2017 a las 1:52
0

Es script sí funciona, pero hay que dar con el dedo en la imagen. Tened en cuenta en el css el z-index, si hay capas por encima el click con el dedo no funcionará.

Esto tampoco va (jquery):

$( document ).ready(
    function() {
        $('#video').play(); 
   });
});
1
  • 1
    Supongo que querías decir $('.fullscreen-bg__video') en vez de ('#video') y, además, debes usar .get(0).play() en vez de .play() porque .play() es un método del DOM, no de jQuery. Commented el 1 feb. 2018 a las 12:17
0

El problema que estás sufriendo es debido a que no todos los navegadores soportan todos los formatos de vídeo y/o códecs de audio y vídeo, por lo que si el navegador chrome de android no soporta el que usas no se reproducirá correctamente.

Para solucionar el problema HTML5 te facilita el trabajo permitiendo varias fuentes de vídeo:

<video poster="http://i.vimeocdn.com/video/578146756_1280x720.jpg" class="fullscreen-bg__video" controls width="560" height="360"> 
  <source type="video/mp4" src="http://techslides.com/demos/sample-videos/small.mp4" />
  <source type="video/webm" src="http://techslides.com/demos/sample-videos/small.webm" />
  <source type="video/ogg" src="http://techslides.com/demos/sample-videos/small.ogv" />
  <source type="video/3gp" src="http://techslides.com/demos/sample-videos/small.3gp" />
</video>

Yo te recomiendo tener el vídeo, como mínimo, en MP4 y WebM.

Aquí tienes un ejemplo sin selección que me funciona en Chrome para Android:

<video poster="http://i.vimeocdn.com/video/578146756_1280x720.jpg" class="fullscreen-bg__video" controls width="560" height="360"> 
  <source type="video/mp4" src="http://techslides.com/demos/sample-videos/small.mp4" />
</video>

Sin embargo otros vídeos MP4 no me funcionan, por lo que es probable que sea debido a un códec de vídeo o audio no soportado, pero teniendo alternativas el navegador es capaz de elegir la que pueda usar correctamente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.