Upload and embed video playing in desktop browser but not playing in mobile browser

Question

I have embed a video in my site. http://www.vaatasmart.com/application

I have embed with following code. And its playing in desktop browser and not playing in mobile browser.

HTML

<div id="container">
<video width="3000" height="380" loop autoplay="autoplay" />
    <source id="mp4" src="https://vaatasmart.squarespace.com/s/hv.mp4" type="video/mp4" />
</video>
</div>

CSS:

html, body {
   padding: 0;
   margin: 0;
   background-color: #efefef;
}
#container {
   padding: 0;
   margin: 0;
   height: 300px;
   width: 580px;
   background-color: white;
   display: block;
   overflow: hidden;
   position: relative;
}

video {
   padding: 0;
   margin: 0;
   width: 600px;
   position: absolute;
   top: -40px;
   left: -10px;
}

Answer 1

Source : html5 video on mobile

If you're embedding HTML5 pages with video inside an iOS or Android app, things get a bit more complicated.

iOS UIWebView To support playing HTML5 video inline, which is the default elsewhere, you need to set the allowsInlineMediaPlayback property, and include the webkit-playsinline attribute on the video tag, otherwise the video will play in the default media player.

You also need to set the mediaPlaybackRequiresUserAction to NO in order to support autoplay.

Android WebView Android WebView requires some explicit settings in order to support HTML5 video. You need to enable hardware acceleration (add android:hardwareAccelerated="true" to your AndroidManifest.xml file) and set WebChromeClient on your WebView.

There are certainly a lot of things to consider when implementing HTML5 video for mobile, but steady improvements in browser support is making it easier for you to give your users seamless in-browser video playback.

Hope this help you.