I got some problem to implement HTML5 video both on iPhone and Android.
I would like to remove the HTML5 video controller slider while the videos is playing.
The purpose is to make user watch the video from start until end without jumping or stop the video.
What you are asking may not be possible . But try this
Set control=false for video tag
Implement your own controls http://www.broken-links.com/2009/10/06/building-html5-video-controls-with-javascript/
Bot since your target is iphone/andriod i doubt if it's possible
You can try this tutorial to build your own player, so you can get rid of anything you don't want.
try this:
<body >
<video id="video" src="BO_VS_ST_MT1.webm" width="480px" height="270px" autoplay controls >
</video>
<canvas width="400" height="300" style="border: 1px solid black;" ></canvas>
<script language="Javascript">
window.onload = function(){ initCanvas(); }
var context;
function initCanvas(){
var video = document.getElementsByTagName("video")[0];
var canvas = document.getElementsByTagName("canvas")[0];
context = canvas.getContext("2d");
video.addEventListener("timeupdate", paintFrame, false);
}
function paintFrame(){
context.drawImage(video, 0, 0, 400, 300);
}
</script>
But Ithink It is gonna look so slow :/
I don't believe that you can do this on the iphone - they have strict settings . IT seems to be that the first time a video loads, you are unable to actually play the video without the user interacting with the video frame, which means that it's impossible to click this element if it's not visible. I think it's a waste of processing power to do that anyway.
Related
I can't get all of these to work together. I have phonegap/JQM running with fastclick.js perfectly on iOS. It's a dream. But for some reason I still get a 300ms delay on android. I put some alerts in and the code is being called. It's baffling really. I am testing on a motorola droid razor maxx.
In my index.html file:
<!DOCTYPE html>
<html>
<head>
...
<script type='application/javascript' src='js/fastclick.js'></script>
</head>
<script>
$(document).on("pagebeforechange", function (e, data) {
FastClick.attach(document.body);
alert('fastclick attached');
var to_page = data.toPage[0].id;
// skip showing #myPage if condition is true
if (to_page == "index") {
$.mobile.pageContainer.pagecontainer('change', 'event-list.html');
e.preventDefault();
}
});
</script>
<body>
<div id="index" data-role="page">
This is the index page.
</div>
</body>
</html>
But it doesn't seem to work. I've also tried attaching it like:
window.addEventListener('load', function() {
new FastClick(document.body);
}, false);
Which both work on iOS but don't seem to have any effect on android. Any suggestions?
edit: It seems if I remove the JQuery libraries it works fine. There has got to be a conflict somewhere. Any idea what it may be? I am using JQM 1.4.
edit: I have also tried using vclick to no avail
$("#test-element").bind('vclick',function() {
$.mobile.pageContainer.pagecontainer('change', 'description.html?lunch_pk=2133',{
transition: "slide",
});
});
...
<h1 id='test-element'> CLICK HERE FOR TEST </h1>
I am also using gestures to change pages which are also being delayed by 300ms, so I don't think that even if vclick was working that it would be a complete solution.
edit: ok, so after some further testing, I am pretty sure the delay is coming from inside JQM pagechange functions. I did a console.log inside the vclick and I the log is pretty responsive when hitting the button. I am trying to dig through JQM but not being very successful, I mean why would it be seemless on iOS and not work on android? And maybe I just need to find a better mobile library.
Answer
I was never able to solve this problem. My solution was to switch libraries. I went to Intel's mobile app framework which was able to do everything I was doing with JQM only more successfully.
You can try vclick without trying onclicks. These built-in jQuery Mobile vclick omits the 300ms delay. I do this by doing this.
$("#element").bind('vclick',function(event) {
yourFunction(this.id);
event.preventDefault();// this prevents the default click event
});
Have you tried opening jQueryMobile library file? There are some functions like:
setTimeout(function() {
$link.removeClass( $.mobile.activeBtnClass );
}, 300 );
I am sure, that searching this file for "delay" or "timeout" and changing it would give a good result. Line above is from
.mobile.popup.handleLink = function( $link ) {
...
}
Try registering FastClick inside the deviceready event handler:
document.addEventListener('deviceready', function() {
FastClick.attach(document.body);
}, false);
Have you tryed to juse the tap event?
$("#test-element").off('tap').on('tap', function(event) {...do your stuff});
Note that .bind is deprecated - better use on / off
Note that depending upon, where you're attaching your eventhandler the eventhandler might get bound multiple times on pagechange and revisit.
You best bind your tap-event-handler in ther pageinit event in order to make sure, that you attaching to the event only once and not every time, you revisit a certain page.
In case you're attaching on pageshow use the "off" first (see above)
I had the same problem with some menu buttons. My solution works for all platforms without a helper library, however, I wish there was a better way like setting a JQM variable:
$('#button').unbind('touchstart click').bind('touchstart click', function(event) {
$('#button').addClass('ui-btn-active');
//doSomethingHere();
setTimeout(function() {
$('#button').removeClass('ui-btn-active');
}, 300); //this 300ms is just the delay for styling the button
event.preventDefault(); //if touchstart is supported, do not let the event propagate to the click handler. Having this here avoids a double trigger.
});
The key is binding to touchstart which triggers immediately.
NOTE- I have this code within a pageshow handler which is why I unbind and then bind it. Otherwise, you'd end up with the same event bound multiple times as the user navigates to and from this page.
There are durations associated with the page transition animations in JQM. Here is some of the CSS for the default 'fade' transition (from jquery.mobile.structure.css v1.4.2):
.fade.out {
opacity: 0;
-webkit-animation-duration: 125ms;
-webkit-animation-name: fadeout;
-moz-animation-duration: 125ms;
-moz-animation-name: fadeout;
animation-duration: 125ms;
animation-name: fadeout;
}
.fade.in {
opacity: 1;
-webkit-animation-duration: 225ms;
-webkit-animation-name: fadein;
-moz-animation-duration: 225ms;
-moz-animation-name: fadein;
animation-duration: 225ms;
animation-name: fadein;
}
JQM changes classes on the to and from pages when transitions start and complete, so in the case of the 'fade' transition, the page being changed to will become the active page 225ms after the from page has completed fading out (125ms) i.e. after 350ms.
You could try disabling the transition by specifying {transition: 'none'} in your call to $.mobile.pageContainer.pagecontainer('change' or by setting $.mobile.defaultPageTransition = "none"; in your mobileinit event handler to rule it as the cause of the delay.
I've always disabled page transitions in my Phonegap JQM apps because of the poor performance and flickering (Android), but I still have responsiveness issues, especially on Android. I think it is down to how the webview prioritises rendering the DOM. I've found that a strategically positioned setTimeout can make page changes seem more responsive by allowing the webview to postpone my application logic until after it has rendered the DOM.
I'm trying to embed a YouTube player into my webpage as below.
The problem I'm having is, the player initially loads and plays the first video fine, but when .loadVideoById is called the player looks to load the video (video title text changes) but then gets stuck on a black screen instead of playing.
This is only happening on Android, with the HTML5 player (both Chrome and the default browser) since updating my phone to Android 4.3, having previously been fine on 4.2.
It works fine through a desktop chrome with the useragent set to fake an Android.
I've also tried on two other Android phones and are having exactly the same problem on both (both are also 4.3). I'm also getting the same behaviour intermittently, using the Google Code Playground Example Youtube Player.
If I attach the ADB Chrome remote debugger, I can see the player get stuck in the buffering state, although video fragments are being downloaded, as expected.
Has anyone experienced anything similar? Or has any suggestions?
Code:
<div id="ytwrapper">
<div id="player" >
</div>
</div>
<script type="text/javascript">
var ytplayer;
2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement("script");
tag.src = "http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
3. This function creates an (and YouTube player)after the API code downloads.
function onYouTubeIframeAPIReady()
{
ytplayer = new YT.Player('player', { width: 1280,
height: 720,
videoId: 'M7lc1UVf-VE',
frameborder:0,
events:
{
"onReady": onYouTubePlayerReady,
"onStateChange": onytplayerStateChange,
"onPlaybackQualityChange": onYTQchange,
"onError": onYTError
}
});
}
function loadnextvid()
{
ytplayer.loadVideoById(vids[currentvid],0, vqs[currentvid]);
}
function onYouTubePlayerReady(playerId)
{
loadnextvid();
}
</script>
I had the same issue. Looks like the only way to fix this for the moment is to destroy and recreate the player instance.
I found this solution here: https://code.google.com/p/gdata-issues/issues/detail?id=5273
Works for me Android 4.4, iOS7.
if (player != null) {
player.destroy();
player = null;
}
player = new YT.Player('divplayer', {
width: '100%',
height: '100%',
videoId: video_id,
playerVars: { 'autoplay': 0, 'playerapiid': 'ytPlayer', 'border': 0, 'hd': 1, 'version': 3, 'rel': 0, 'color' : 'red' },
events: {
'onReady': onPlayerReady
}
});
Am using InAppBrowser to play YouTube videos. Am able to embed videos and play it, but while its playing if I click on "Done" button it goes back to where it was, but still I can hear the audio. It looks like it didnt kill the childBrowser. I tried clearing out the player HTML in order to stop the video, but even that didnt work.
var childBrowser = window.open(videoUrl, '_blank', 'location=yes');
// childBrowser is an InAppBrowser object
childBrowser.addEventListener('exit', function(event) {
top.document.getElemenetById("player").innerHTML = "<p></p>";
});
Any solution ?
I had similar problems and, adapted to your code,
the solution would look like this:
var childBrowser = window.open(videoUrl, '_blank', 'location=yes');
var closeCB = function(event){
childBrowser.removeEventListener('exit',closeCB);
childBrowser.close();
childBrowser = null;
//for reusability purposes I strongly suggest that you use "display: none" here
top.document.getElemenetById("player").style.display = "none";
};
childBrowser.addEventListener('exit', closeCB);
After a huge research I didn't find any answer to my question yet. I wanted to achieve my goal with FullScreenAPI but it is not supported in any mobile browser (except Firefox 19 and Blackberry browser - but I need a cross-browser solution). Here's the source. I also tested FullScreenAPI on native android browser and mobile Chrome with appropriately prefixed fullscreen functions. Each function was of type undefined.
Another approach was the rtsp protocol which is usually handled by an outer player. Here is the guy who assumes that m.youtube.com uses that solution - I think it is not true (maybe the answer is outdated). Youtube uses native video's fullscreen. On mobile Chrome when you tap the play button, the movie instantly goes fullscreen.
Although, every source I googled tells me that native fullscreen is not possible on android browsers, still HTML5 video element with its native controls gives us a fullscreen button which works perfectly out there.
Since I don't want the native controls, can anyone share any ingenious solution to How to trigger HTML5 video fullscreen button'sevent?
You can make a popup at 100% width/height with a close button on absolute on it playing your HTML5 video.
Old, simple and dirty trick... But works
all you need to work on "webkitbeginfullscreen" and "webkitendfullscreen" events for mobile devices, i think.it will
<!doctype html>
<html>
<head>
<title>video</title>
<script type="text/javascript">
function videoControl() {
var myVideo = document.getElementById('myVideo');
myVideo.addEventListener("webkitbeginfullscreen", enteringFullscreen, false);
myVideo.addEventListener("webkitendfullscreen", exitingFullscreen, false);
}
function enteringFullscreen() {
alert("entering full-screen mode");
}
function exitingFullscreen() {
alert("exiting full-screen mode");
}
</script>
</head>
<body onload="videoControl()">
<div id="videoContainer">
<video id="myVideo" src="myVideo.m4v" autoplay controls>
</video>
</div>
</body>
</html>
Try video.webkitEnterFullscreen() in a user interactive event handler(ex: click)
Most people facing this issue is because the HTML5 video is implemented inside <iframe>.
Add the three attributes in iframe to enable fullscreen in adroid chrome
<iframe allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
Here's what I use that should pretty much work everywhere:
function toggleFullScreen() {
var doc = window.document;
var elem = doc.body; //the element you want to make fullscreen
var requestFullScreen = elem.requestFullscreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen || elem.msRequestFullscreen;
var cancelFullScreen = doc.exitFullscreen || doc.webkitExitFullscreen || doc.mozCancelFullScreen|| doc.msExitFullscreen;
if(!(doc.fullscreenElement || doc.mozFullScreenElement || doc.webkitFullscreenElement || doc.msFullscreenElement)) {
requestFullScreen.call(doc.body);
}
else {
cancelFullScreen.call(doc);
}
}
According to:
http://developer.android.com/sdk/android-2.0-highlights.html
Android 2.0 should support the HTML5 video element. I haven't been able to get this to work using a Motorola Droid, and haven't been able to successfully view a video on any of the HTML5 video example pages out there. Since there currently isn't support for QuickTime or Flash, this is the only other thing I can think of for embedding mp4 video in a web page. Has anyone had any luck with this?
I've just done some experimentation with this, and from what I can tell you need three things:
You must not use the type attribute when calling the video.
You must manually call video.play()
The video must be encoded to some quite strict parameters; using the iPhone setting on Handbrake with the 'Web Optimized' button checked usually does the trick.
Have a look at the demo on this page: http://broken-links.com/tests/video/
This works, AFAIK, in all video-enabled desktop browsers, iPhone and Android.
Here's the markup:
<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 I have this in the JS:
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
I tested this on a Samsung Galaxy S and it works fine.
Roman's answer worked fine for me - or at least, it gave me what I was expecting. Opening the video in the phone's native application is exactly the same as what the iPhone does.
It's probably worth adjusting your viewpoint and expect video to be played fullscreen in its own application, and coding for that. It's frustrating that clicking the video isn't sufficient to get it playing in the same way as the iPhone does, but seeing as it only takes an onclick attribute to launch it, it's not the end of the world.
My advice, FWIW, is to use a poster image, and make it obvious that it will play the video. I'm working on a project at the moment that does precisely that, and the clients are happy with it - and also that they're getting the Android version of a web app for free, of course, because the contract was only for an iPhone web app.
Just for illustration, a working Android video tag is below. Nice and simple.
<video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>
Here I include how a friend of mine solved the problem of displaying videos in HTML in Nexus One:
I never was able to make the video play inline. Actually many people on the internet mention explicitly that inline video play in HTML is supported since Honeycomb, and we were fighting with Froyo and Gingerbread... Also for smaller phones I think that playing full screen is very natural - otherwise not so much is visible. So the goal was to make the video open in full screen. However, the proposed solutions in this thread did not work for us - clicking on the element triggered nothing. Furthermore the video controls were shown, but no poster was displayed so the user experience was even weirder. So what he did was the following:
Expose native code to the HTML to be callable via javascript:
JavaScriptInterface jsInterface = new JavaScriptInterface(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(jsInterface, "JSInterface");
The code itself, had a function that called native activity to play the video:
public class JavaScriptInterface {
private Activity activity;
public JavaScriptInterface(Activity activiy) {
this.activity = activiy;
}
public void startVideo(String videoAddress){
Intent intent = new Intent(Intent.ACTION_VIEW);
intent.setDataAndType(Uri.parse(videoAddress), "video/3gpp"); // The Mime type can actually be determined from the file
activity.startActivity(intent);
}
}
Then in the HTML itself he kept on failing make the video tag work playing the video. Thus, finally he decided to overwrite the onclick event of the video, making it do the actual play. This almost worked for him - except for no poster was displayed. Here comes the most weird part - he kept on receiving ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host" every time he set the poster attribute of the tag. Finally he found the issue, which was very weird - it turned out that he had kept the source subtag in the video tag, but never used it. And weird enough exactly this was causing the problem. Now see his definition of the video section:
<video width="320" height="240" controls="controls" poster='poster.gif' onclick="playVideo('file:///sdcard/test.3gp');" >
Your browser does not support the video tag.
</video>
Of course you need to also add the definition of the javascript function in the head of the page:
<script>
function playVideo(video){
window.JSInterface.startVideo(video);
}
</script>
I realize this is not purely HTML solution, but is the best we were able to do for Nexus One type of phone.
All credits for this solution go to Dimitar Zlatkov Dimitrov.
If you manually call video.play() it should work:
<!DOCTYPE html>
<html>
<head>
<script>
function init() {
enableVideoClicks();
}
function enableVideoClicks() {
var videos = document.getElementsByTagName('video') || [];
for (var i = 0; i < videos.length; i++) {
// TODO: use attachEvent in IE
videos[i].addEventListener('click', function(videoNode) {
return function() {
videoNode.play();
};
}(videos[i]));
}
}
</script>
</head>
<body onload="init()">
<video src="sample.mp4" width="400" height="300" controls></video>
...
</body>
</html>
pointing my android 2.2 browser to html5test.com, tells me that the video element is supported, but none of the listed video codecs... seems a little pointless to support the video element but no codecs??? unless there is something wrong with that test page.
however, i did find the same kind of situation with the audio element: the element is supported, but no audio formats. see here:
http://textopiablog.wordpress.com/2010/06/25/browser-support-for-html5-audio/
Nothing worked for me until I encoded the video properly. Try this guide for the correct handbrake settings:
http://forum.handbrake.fr/viewtopic.php?f=7&t=9694
Maybe you have to encode the video specifically for the device eg:
<video id="movie" width="320" height="240" autobuffer controls>
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.mp4" type='video/mp4; codecs="some droid video codec, some droid audio codec"'>
</video>
There are some examples of encoding configurations that worked on here:
https://supportforums.motorola.com
Try h.264 in an mp4 container. I've had much success with it on my Droid X. I've been using zencoder.com for format conversions.
This works for me:
<video id="video-example" width="256" height="177" poster="image.jpg">
<source src="video/video.mp4" type="video/mp4"></source>
<source src="video/video.ogg" type="video/ogg"></source>
This browser does not support HTML5
</video>
Only when the .mp4 is on top and the videofile is not to big.
It's supposed to work, but watch the resolution:
Android 2.0 and webkit
Canvas works right out of the box,
while Geolocation seems to not work at
all in the Emulator. Of course, I have
to send it mock locations to get it to
work, so I have no idea what this
would be like on an actual phone. I
can say the same thing with the video
tag. There are issues with it not
actually playing the video, BUT I
think it’s the fact that the video is
a higher resolution than what the
Emulator can handle. We’ll know more
once someone tries this on a Motorola
Droid or other next-gen Android device
This might not exactly answer your question, but we're using the 3GP or 3GP2 file format. Better even to use the rtsp protocol, but the Android browser will also recognize the 3GP file format.
You can use something like
self.location = URL_OF_YOUR_3GP_FILE
to trigger the video player. The file will be streamed and after playback ends, handling is returned to the browser.
For me this solves a lot of problems with current video tag implementation on android devices.
According to : https://stackoverflow.com/a/24403519/365229
This should work, with plain Javascript:
var myVideo = document.getElementById('myVideoTag');
myVideo.play();
if (typeof(myVideo.webkitEnterFullscreen) != "undefined") {
// This is for Android Stock.
myVideo.webkitEnterFullscreen();
} else if (typeof(myVideo.webkitRequestFullscreen) != "undefined") {
// This is for Chrome.
myVideo.webkitRequestFullscreen();
} else if (typeof(myVideo.mozRequestFullScreen) != "undefined") {
myVideo.mozRequestFullScreen();
}
You have to trigger play() before the fullscreen instruction,
otherwise in Android Browser it will just go fullscreen but it will
not start playing. Tested with the latest version of Android Browser,
Chrome, Safari.
I've tested it on Android 2.3.3 & 4.4 browser.
After much research, in many different devices, up to now, I've reached the simple conclusion that MP4 is much less supported than MOV format.
So, I'm using MOV format, which is supported by all Android and Apple devices, on all browsers.
I've detected weather the device is a mobile device or a desktop browser, and set the SRC accordingly:
if (IsMobile()) {
$('#vid').attr('src', '/uploads/' + name + '.mov');
}
else {
$('#vid').attr('src', '/uploads/' + name + '.webm');
}
function IsMobile() {
var isMobile = false; //initiate as false
if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))) isMobile = true;
return isMobile;
}
I tried using the .mp4 format to play a video on Android devices but that did not go well. So after some trial and error, I converted the video into the .webm format and following code with no extra javascript or JQuery:
<video id="video" class="video" muted loop autoplay>
<source src="../media/some_video.webm" type="video/webm">
Sorry, your browser doesn't support embedded videos.
</video>
It worked on an older Android device (at least a few years old as of 2020).
HTML5 is supported on both Google (android) phones such as Galaxy S, and iPhone. iPhone however doesn't support Flash, which Google phones do support.