AngularJS: How to open your own video player on mobile phones

Question

I am using the vjs-video AngularJS plugin to render the video in my application. On the desktop, it shows them in ngDialog (by binding the dialog box to the ng-click of the gallery element)

It works fine, but on mobile phones I want to show my own full-screen player right after a user clicks (press) a gallery item. I know how to detect mobile and desktop in an Angular app, but what to do next? Now the user must click on the gallery element and then display a dialog, after which the user must make a second click on the player.js video player in the dialog box, and then start playing in his own player, but I want to open my own player immediately after the first click.

Answer 1

Have you tried the JavaScript "requestFullscreen" api?

var elem = document.getElementById("myvideo"); if (elem.requestFullscreen) { elem.requestFullscreen(); } 

Here is a link to mozilla docs on this api .

And here is the link to screenfull.js - a library that should make this even easier.