I'm developing a mobile app with cordova and Angular, and I have videos on the app
I used Videogular with the following code
<vg-player vg-responsive="true" (onPlayerReady)="onPlayerReady($event)">
<vg-overlay-play></vg-overlay-play>
<vg-buffering></vg-buffering>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
<vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
</vg-scrub-bar>
<vg-controls>
<vg-play-pause></vg-play-pause>
<vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
<vg-scrub-bar style="pointer-events: none;"></vg-scrub-bar>
<vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
<vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
<vg-mute></vg-mute>
<vg-fullscreen></vg-fullscreen>
</vg-controls>
<video [vgMedia]="media" #media id="singleVideo" preload="auto" [poster]="urlbaseImages+programmeData.imagen" >
<source [src]="_domSanitizer.bypassSecurityTrustUrl(programmeData.url)" type="video/mp4">
</video>
</vg-player>
With android (I don't know if this happens too on iOS yet) when I open a video with fullscreen, then if I tap the back button the app closes
is there a way to make the back button to only close the video but stay on the app?
Seems a bug, I found a workaround here
https://github.com/apache/cordova-android/pull/823
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);
}
}
After some hours of trying, I want to ask how to loop a video on Android devices using the HTML5 video tag.
To be some kind of browser independent, I included video.js to play the videos. Everything worked fine for Firefox and Chrome, but on my Android device (SSG3 with Android 4.0.4) the video won't start or loop.
<video id="model_video" autoplay loop preload="auto" data-setup="{}" width="90%" height="90%" poster="images/black.jpg">
did not start the video. But this was easily solved by calling video.start() in JS. But looping does not work with that. Even if the loop attribute seems to be supported, it causes problems. With attribute loop=false or even with the missing loop attribute, it is still set to true.
There are a couple of websites pointing out that there is the need of adding an eventlistener. But unfortunately, it didn't work.
The solution is to set the loop attribute to false using JS. Even with loop=false as an attribute of the video tag or with missing loop attribute, video.loop returns true. So to get the looping done, the following snippet did the trick:
var video = document.getElementById("model_video");
//this did the trick
video.loop = false;
video.addEventListener('ended', function() {
video.currentTime=0.1; video.play(); }, false);
video.play();
Cheers!
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.
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.