I created an Angular app wrapped inside a Phonegap app. I've created a directive, which is a button. When one clicks the button, the video library is returned and a video can be selected. On callback, I receive the video URI (I'm testing on iOS, something like file:///private/var/mobile/Containers/Data/Application/..../tmp/video.MOV).
I'd like to give users a preview of the video they selected, so I create a video tag on this callback:
$('#test').append('<video controls preload="auto" width="340" height="340" onclick="this.play();"><source src="' + videoURI + '" type="video/mp4" /></video>');
The video tag is created successfully, and a play button is visible. Nothing happens when I click the play button, however. The video won't play. Am I doing something wrong? Or is there any other way to play a local video inside a Phonegap application?
Related
I have a Brightcove video that is set to autoplay with sound, but ONLY when the page is viewed on a mobile device. I set a media query to have the video and it's containers set to "display: none" when it's on desktop. However, the audio still plays on desktop. How can I turn this off?
Is this possible to do with just CSS, ideally without messing with the player itself or adding Javascript?
display:none does not actually remove the item from the DOM. It is still present, just not visible. Any other CSS option will achieve the same end result. If you do not want the player, you will have to make changes in the code to remove it from the DOM.
I have created a very minimal web app where in on click of button, the mobile camera should open up. In the component, I have checked for whether the browser supports webRTC and then camera should be invoked.
Based on the documentation which I went through on Google developer site I found that putting:
<input type="file" accept="image/*">
Should work with a capture attribute which decides which camera to open up. The documentation also states that in browser a file selection option would come for the same input tag.
Stating all that for me the input tag never works either on browser or mobile. There is not much available on the net and was wondering if someone can help me here. With the video tag the camera does work but that comes embedded inside the webpage. I want the device camera should open up on click of button so that I have all the capabilities which is normally there with the camera.
So, seems like I was making a very silly mistake because of which the input tag was not working.
The input tag to work with the camera required three attributes:
<input id="accessCamera" type="file" accept="image/*" capture="user">
I am using vjs-video AngularJS plugin for rendering videos in my app. On desktop it shows them in ngDialog (by binding dialog window to ng-click of gallery element)
It's working ok, but on the mobiles I want to show native fullscreen player right after user clicked (tapped) gallery item. I know how to detect mobile and desktop in Angular app, but what to do next? Right now user have to tap on gallery item and then dialog is showing, after that user should make second tap on video.js player in dialog and then video start to play in native player, but I want to open native player right after first click.
Have you tried the JavaScript "requestFullscreen" api?
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
}
Here's a link to the mozilla docs on this api.
And here's a link to screenfull.js, a library that's supposed to make this even easier.
Implemented videogular html player.All works well in desktop but in case of Apple IPAD the volumne control is not visible.And one major issue is on clicking full-screen of videogular player,video does not plays in videogular instead it opens up in the apple's native player(i.e., quick player).
How can I prevent video from playing in native player in IPAD and display volumne control for vidoegular.?
Is there any fixes available.
Please help!
Volume button is not shown on mobile devices because you can't change with the native API the volume, user must use hardware buttons to change the volume.
Additionally, on mobile devices you can't set HTML elements to fullscreen, only the video element. If you need Videogular controls in fullscreen mode you can try to use "vg-native-fullscreen":
<videogular vg-native-fullscreen="false">
<!-- content -->
</videogular>
However, this is an emulated fullscreen and user will see the browser navigation bar.
There was a similar question posted few days ago but it was deleted... I use fancy box to popup a youtube video when the user clicks on thumbnail.
But in mobile version i wish to trigger mobile's video player instead of playing video on popup so the user can watch the video in fullscreen...
Is there any way?!