Develop Reference

react-native-video doesn't load videos with a dynamic uri

I'm working on an app where one part of the process is shooting a video, then uploading it. I'm using react-native-video to display the preview after the user has finished recording, and react-native-camera for the capturing process. I also use react-navigation to move between screens.
Currently I can get to the preview screen and set the video component's source uri from Redux. However, there is no player to be seen. The uri is in format "file:///path/video.mp4", so apparently it should be in the app cache as intended.
First the user is presented with a camera, where s/he can capture the video.
const recordVideo = async () => {
if (camera) {
const data = await camera.current.recordAsync()
if (data) {
dispatch(saveVideo(data)) <-- CONTAINS THE URI
navigation.navigate(CONFIRM)
}
}
When stopRecording() is called, the promise obviously resolves and the video's URI will be dispatched to Redux. Afterwards we navigate to the "confirmation screen", where the user can preview the video and choose whether to shoot another or go with this one.
My problem is, I can't get that preview video to play at all. I think I've tried pretty much everything within my power by now and I'm getting really tired of something so seemingly simple being so overly difficult to do. I've gotten the video to play a few times for some odd reason, so it's not the player's fault. At best what I've achieved is show the preview once, but when you go back and shoot another, there's no video preview anymore. Also, the "confirm" screen loads photos normally (that were taken in the same manner: camera -> confirm), but when it's the video's turn, it just doesn't work. The video component's onError handler also gives me this: {"error": {"extra": -2147483648, "what": 1}} which seems like just gibberish.
PS. yes, I've read through every related post here without finding a proper solution.

Use Exoplayer
Instead of using the older Media Player on Android, try using the more modern Exoplayer. If you're on React Native 0.60+, you can specify this in your react-native.config.js by doing the following:
module.exports = {
dependencies: {
"react-native-video": {
platforms: {
android: {
sourceDir: "../node_modules/react-native-video/android-exoplayer"
}
}
}
}
};
I was experiencing the same issue and this solution worked for us. Note, we're only supporting Android 5+ so not sure if this will work with devices older than that.
https://github.com/react-native-video/react-native-video/issues/1747#issuecomment-572512595

Android HTML5 Video in Fullscreen Mode

I'm trying to get my video stream to work on android in fullscreen mode. For iOS I use a native <video> tag, which works perfectly.
I can play the video on my android, but I don't have a fullscreen button. I also tried to create a own template for the android devices and simply set the width and height of the player to the window size (Fake Fullscreen). The problem I have here is, that when I rotate the device, the resize doesn't work correctly, so that i can scroll over the video.
Heres what I tried:
$(document).ready(function() {
$(window).on('resize orientationchange', function() {
$('#myPlayer').width( $(window).width() ).height( $(window).height() );
});
}
Can anyone help me to get this to work on Android?
I hope you can understand my question, my english isn't that good ...

HTML5 video full screen on mobile browsers (android)
seems the same question.
The events you need are: webkitbeginfullscreen (enter fullscreen) and webkitendfullscreen (exit fullscreen)
var player = document.getElementsByTagName("video")[0];
player.addEventListener('webkitbeginfullscreen', onVideoBeginsFullScreen, false);
player.addEventListener('webkitendfullscreen', onVideoEndsFullScreen, false);

Phonegap window.open does not work on Android

I have an iOS/Android app built on cordova 2.6 and jqm 1.3. I need to open a link to an external website after the user clicks on a button. The code I am using is:
var ref = window.open('http://google.com','_self','location=yes');
ref.addEventListener('loadstart',function(event) {
console.log('load started');
});
ref.addEventListener('loadstop',function(event) {
console.log('load stopped');
});
ref.addEventListener('loaderror',function(event) {
console.log('load error = ' + JSON.stringify(event));
});
On iOS everything performs like I would expect. A new browser window opens with the google website loaded. But I cannot get anything to to load in Android. When I click on the button, nothing happens. I have put in console statements before and after the window.open, so I know the code is at least being executed.
My config.xml should be wide open for white listed sites:
<access origin=".*"/>;
I have tested on a Nexus 7 (android 4.2) and an android 2.2 emulator with the same results on both.
Does anyone know why window.open would not be firing correctly on android?

It looked like it was a problem with 2.6 loading plugins on Android. I upgraded to 2.7 and everything started to work.

Perhaps it's a solution to use the ChildBrowser plugin? This gives you a bit more control over the operation itself, while still preserving platform compatibility between iOS and Android.
In most cases, I use something like the following snippet to use the childbrowser to display an external page.
function openBrowser(url) {
// determine if the childbrowser plugin is available
var useChildBrowser = ('plugins' in window && window.plugins.childBrowser);
if (useChildBrowser) {
popup = window.plugins.childBrowser;
popup.showWebPage(url, { showLocationBar: false, showAddress: false });
} else {
popup = window.open(url, 'Share', "['width=600px', 'height=400px', 'resizable=0', 'fullscreen=yes']");
}
}
Note that this falls back to using window.open if the ChildBrowser plugin isn't available, so you won't break anything else with this. Could be worth a shot, perhaps?

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.

HTML5 video will not loop on Android devices

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!