Video Html5 Does not work in Android Chrome

0

I want to show a video and it works well on a computer, but not on Android. Seek help but it did not work.

//// Code

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

////

    
asked by Jenio158 10.07.2017 в 23:06
source

3 answers

1

The problem is that in chrome for Android you need an element that starts the video add an id to the element:

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

and a script:

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

and

    
answered by 10.07.2017 в 23:14
0

The script does work, but you have to find your finger on the image. Take into account in the css the z-index , if there are layers above the click with the finger will not work.

This is not going either (jquery):

$( document ).ready(
    function() {
        $('#video').play(); 
   });
});
    
answered by 26.09.2017 в 09:38
0

The problem you are suffering is that not all browsers support all video formats and / or audio and video codecs, so if the android chrome browser does not support the one you use, it will not play correctly.

Solving the problem HTML5 makes it easier for you to work with multiple video sources:

<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>

I recommend you have the video, at least, in MP4 and WebM.

Here is an example without selection that works for me in Chrome for 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>

However other MP4 videos do not work for me, so it's probably due to an unsupported video or audio codec, but having alternatives the browser is able to choose the one that I can use correctly.

    
answered by 02.02.2018 в 14:03