1

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.

redrom
  • 11,502
  • 31
  • 157
  • 264

1 Answers1

2

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.

Shashank Agrawal
  • 25,161
  • 11
  • 89
  • 121
elecash
  • 925
  • 7
  • 11
  • Thanks, I tried a few examples from given link. It displays video preview and after tap on video is video played in fullscreen only on iOS (on Android 4.4 is it still non- fullscreen window). I would like to have a list item with text and after click directly run video in fullscreen on booth platforms. How can i do it please? – redrom Mar 04 '15 at 07:43
  • I definitely hate the fullscreen API, it is really buggy today and it behaves different even in same OS but different phones. See this related issue in screenfull (which is the library that inspires the Videogular fullscreen support) https://github.com/sindresorhus/screenfull.js/issues/56 – elecash Mar 04 '15 at 21:56
  • So what are You recommending for me? On iOS it works fine, on Android i works quite strange, screen is facing like full screen is displayed, but admob is vissible and also header of the view is vissible too. – redrom Mar 04 '15 at 23:08
  • You can try by disabling the native fullscreen and play inline. You can do that by adding the attribute vg-plays-inline="config.playsInline" in the videogular tag. – elecash Mar 05 '15 at 11:04
  • Could You please take a look on this topic? : http://stackoverflow.com/questions/28859270/videogular-how-to-play-given-video-file-on-div-ng-click – redrom Mar 05 '15 at 11:20