Develop Reference

Cordova - how to play mp4 video in fullscreen and in loop?

I would like to play given mp4 video file in the fullscreen and in the loop.
Is existing some plugin for this?
I found the videogular library for Angular based apps.
http://www.videogular.com/docs/#/api/com.2fdevs.videogular.directive:vgLoop
But i don't know it is the right choice for what i need.
I can be something lightweight. I need only play in fullscreen and in the loop wit possibility to close the video (no sound, seeking in video, timeline, etc..).
Many Thanks for any advice.

With Videogular you have all those requirements covered. Probably you need something pretty basic like this:
http://www.videogular.com/examples/simplest-videogular-player/
You can fork the codepen and add the loop capability. To do the fullscreen on play you can add an ng-click to the vg-overlay-play plugin with an API.toggleFullScreen() for example.
HTML
<div ng-controller="myController as ctrl">
<videogular vg-player-ready="onPlayerReady($API)" vg-loop="ctrl.config.loop">
<vg-media vg-src="ctrl.config.sources"></vg-media>
<vg-overlay-play ng-click="API.toggleFullScreen()"><vg-overlay-play>
</videogular>
</div>
JS
angular.module("myApp").controller("myController",
function myController($sce) {
this.API = null;
this.config = {
loop: true,
sources: [
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}
]
};
this.onPlayerReady = function onPlayerReady(API) {
this.API = API;
};
}
);
I've not tested this, but it should work or close to.

Possible to reduce SoundManager 2 lag on Android?

I've implemented SoundManager 2 on my webpage which all works fantastically well in every browser I've thrown at it so far.
When I test on desktop, there is very little lag between clicking the div and hearing the sound played.
However, on Android there is always a lag of about a second the first time the sound is played. After that, there is hardly any lag at all.
Is it possible to reduce or remove the first time played lag on Android?
Here is the code I'm using
$(document).ready(function() {
soundManager.setup({
url: 'www.mysite.com/swf/',
preferFlash: false,
onready: function() {
soundManager.setup({
defaultOptions: {
autoLoad: true,
autoPlay: false
}
});
soundManager.createSound({
id: 'mysound',
url: 'www.mysite.com/sounds/mysound.mp3',
volume: 50
});
}
});
$(document).on("click",".wrapper",function(e){
soundManager.play('mysound');
}
}
I've tried manually loading the sound like this
var preload = soundManager.createSound({
id: 'mysound',
url: 'www.mysite.com/sounds/mysound.mp3',
volume: 50
});
preload.load();
But that made no difference!
Anybody had this working without a lag on Android?

I believe the problem is to do with android's policy of only allowing sound to play in response to a user input.
eg: Autoplay audio on mobile safari
This is a limitation in mobile browsers.
the reason you have lag is from the fact that the sound has to load the first time you click. Your preloading does not work, as it is not run in response to user input, and is therefore blocked.
A solution would be to implement a welcome screen that loads the sound upon hitting an 'enter' button, as the top comment of the above link describes.
If you only need this to work on one browser you can navigate to
chrome://flags/#disable-gesture-requirement-for-media-playback
on your android phone and click Enable

html5 video tag to play full screen with Android

I'm creating a mobile site where I have a video I'd like to play when someone clicks on a link:
<div id="player"></div>
<?php echo $result_videos[$i]["camera_name"]; ?>
<script type="text/javascript">
function DoNav(theUrl)
{
// only add the player if it doesn't yet exist
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
mydiv.append(myvideo);
} else {
$('#myfileplayer').attr("src",theUrl);
}
}
</script>
With the iPhone, this works great, I click on video and it goes full screen. Android works as well but it requires you to click the video to play then click on the full screen. Is it possible to get to the full screen like iPhone just when you hit play?

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 given up on this. My conclusion is that the html5 video tag on Android devices blows chunks. It works in some devices but not on others. And there is no common criteria like 3.x or 4.x, it just seems to be random. I hope this gets better sometime soon especially since flash support is not longer existent.
Oddly sticking with a simple href seems to be the most consistent. You lose some controls but way better than the video tag...at least so far.

Have you checked out mediaelement.js?

Try something along the lines of:
document.getElementById('myfileplayer').addEventListener('play', function (e) { this.mozRequestFullScreen ? this.mozRequestFullScreen() : this.webkitRequestFullScreen ? this.webkitRequestFullScreen() : null; }, false);
Either that or maybe something along the lines of:
document.getElementById('myfileplayer').addEventListener('play', function (e) { this.webkitEnterFullscreen(); }, false);
webkitEnterFullscreen is the fullscreen method of a VIDEO element that is currently working on iOS. I'm not sure about support on Android devices.
mozRequestFullScreen and webkitRequestFullScreen are implementations of Mozilla and Google's FullScreen API which is used to activate full screen mode on practically any DOM element.
Hopefully that gives you at least a starting point to work from...

Most vendors require user interaction to go full screen, which is why natalee's answer doesn't work. For Andriod, you can call webkitEnterFullScreen() inside your anchor's click handler since it's a valid user interaction:
myvideo[0].webkitEnterFullScreen();
myvideo[0].play();
or
$('#myfileplayer')[0].webkitEnterFullScreen();
$('#myfileplayer')[0].play();
Note how I'm stripping jQuery's wrapper with [0]. It doesn't work otherwise.

In Titanium how do I get video to play in Android?

In Titanium 1.6.1 I can get Android 2.2 to play video on Kitchen Sink, but have been unable to get video to play outside of Kitchen Sink on Android. I'd like the smallest code snippet possible to play a video in Android.
In my current attempt I tried using the movie_embed.js from Kitchen Sink in a new project's app.js file like this:
var btnPlayMovie = Titanium.UI.createButton({
text: 'Click me',
left: 10,
height: 30,
top: 100
});
btnPlayMovie.addEventListener('click', function(){
var win = Titanium.UI.createWindow({
url:'./movie_embed.js',
title:'Test movie'
});
//various methods of opening the window win.open(), Ti.UI.currentTab.open(win, {animated:true}), etc
//none have worked either erroring or showing a black screen.
});
it works in iPhone, but not in Android 2.2

I recommend not trying to do video in Titanium.
We have video working in 1.6.2. Right now we only have 2 videos playing in it. What will play is very limited. I'm guessing it is encoding issues. Also the video opens in a new Window, we can't change the url of an existing video, and have other issues.

Sound playing and forward swiping animation flickering problem in android phonegap and jqtouch?

I am developing an app using phonegap for android. It consists of around 25 images and similar number of mp3 files. Each mp3 file has duration not more than 10 seconds. The requirement of app is whenever a image is shown on screen its related mp3 file should be played. I am using jqtouch swipe action to move from one page to another. I am facing following problems both on emulator and real device(samsung galaxy 3)-
After 15-20 images sound stops playing both on emulator and galaxy 3. In logcat I got following error
ERROR/AudioFlinger(34): not enough memory for AudioTrack size=49216
I am using following code to play mp3 files
if(mp3file!=null){
mp3file.stop();
mp3file = null;
}
mp3file = new Media("/android_asset/www/name_of_file.mp3",
function() {
console.log("playAudio():Audio Success");
},
function(err) {
},
function(status) {
});
mp3file.play();
I think error is due to audiomanager objects from phonegap api of each mp3 file remaining in memory.
I want to know how to destroy media object created in javascript. You can play, stop, pause. But is there any method in phonegap for android to destroy it so that it does not remain in memory after it has done playing.
Another problem that I am facing is related with left swipe action in jqtouch to view next image. If I am currently viewing image1 and if I try to view image2 by left swipe action, image2 is shown for short amount of time and after that image1 is shown for a moment and after that again image2 is shown. In short the transition from image1 to
image2 is not smooth and it has flickering effects. However if i go from image2 to image1 using right swipe transition is smooth.
Thanks

I got some help with another developer on this.The trick is to make a function declare mp3file outside the function then call stopRecord() on it.(even though you're not doing recording).I tested this with a simple button playing the sound over and over and it worked 75 times before I got tired of playing with it.
Let me know it works for you.
var mp3file;
function playAudio(){
if(mp3file!=null){
mp3file.stop();
mp3file.stopRecord();
mp3file=null;
}
mp3file = new Media("/android_asset/www/yourmp3.mp3",
function() {
console.log("playAudio():Audio Success");
},
function(err) {
},
function(status) {
});
mp3file.play();
}