Mobile device browser does not play html5 video in mp4 format

Question

Mobile device browser does not play html5 video in mp4 format

Navigation

#1 by (2 votes)

1

I'm creating a website with background video in mp4 format. I am in the process of converting it to webM to see if I can get it reproduced in browsers on mobile devices and it works in chrome firefox and even internet explorer PCs but so far in any mobile device. Is it the problem that I only have one video in mp4 format? or there is something that I am not doing well. Here the code and hopefully you can help me.

var video = document.getElementById('video'),
	clase_video = document.getElementsByClassName('video')[0],
	height = window.innerHeight;
	function ajustar() {
	 	clase_video.style.minHeight = height + "px";
		video.style.minHeight = height + "px";
		if(window.innerWidth < 510){
			video.style.height = height + "px";
		}
	}
	ajustar();

.video{
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:rgba(0,0,0,0.6);
	z-index:1;
}
video{
	width:100%;
	min-width:1200px;
	top:0;
	left:0;
	z-index:0;
	position:fixed;
}

<body>
	<div class="body" style="margin-bottom:-1.3em;">
		<video id="video" autoplay="autoplay">
        	<source src="video/bachata.mp4" />
            <source src="video/bachata.ogg" />
            <source src="video/bachata.webm" />
        </video>
      </div>
</body>

If you wish to see the final website, you can access www.rumbalatinaperu.com. I hope you can help me.

android javascript html5

asked by Mike 20.06.2016 в 06:16

source

1 answer

I want to bring the date of all the records and compare it with the current date? pass table row to another with jquery

score 2 · Answer 1

It seems that in html5 there are many phones that do not have compatibility with mp4 ; to resolve it in this post comment that :

Do not use the attribute type
Manually call play() with javascript
Try to avoid the .mp4 since some give problems.

The code used is:

<video id="video" autobuffer height="240" width="360">
<source src="BigBuck.m4v">
<source src="BigBuck.webm" type="video/webm">
<source src="BigBuck.theora.ogv" type="video/ogg">
</video>

And it would be necessary to call the play :

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