0

When I use plain html5 video/audio on Android, I have my user click a button on startup. In the click handler I kickstart all media:

$('.viewaud').each(function(i,el){
                el.load();
                el.play();
                el.pause();
            })

After that I can start videos/sounds programmatically without the user having to click. Is something similar possible in videogular?

Jørgen
  • 11
  • 3

1 Answers1

0

Yes, you can do something similar with Videogular.

HTML template:

<videogular vg-player-ready="vm.onPlayerReady($API)">
    <!-- other components -->
</videogular>
<button type="button" ng-click="vm.onClickStart()">Start</button>

JS Controller:

angular.module("myApp").controller("MainCtrl",
    function ($sce) {
        this.onPlayerReady = function (API) {
            this.API = API;
        };

        this.onClickStart = function (event) {
            this.API.play();
            this.API.pause();
        };

        // More code...
    }
);
elecash
  • 925
  • 7
  • 11
  • Thank you! Works fine, but only for the current player. Can I somehow loop through all players in all views? – Jørgen Mar 11 '16 at 09:16
  • Check this answer, you can save all Videogular APIs in an array and loop through them http://stackoverflow.com/questions/31827732/stop-other-video-that-is-playing-in-background-on-play-the-new-one – elecash Mar 11 '16 at 11:19
  • As I understand the solution in the link this makes it possible to know all API''s in one controller/view. But I would like to loop through all API''s in all controllers/views - or use the same API for all videos. Is it possible? – Jørgen Mar 11 '16 at 13:04
  • You can do that with a service. Save the APIs to a service and then loop in a service function. A service is a singleton and therefore global. – elecash Mar 11 '16 at 15:21
  • I've now put all my configs in a service and loops through them with a ng-repeat in my shell page. It works OK - I get the expected number of API's (one per config) registered in the service's players array. But it seems to me, that when I use a player with one of the configs in a wiew, there will be created a totally new API. How do I force the videogular players in views to use the API's from the players array in the service? – Jørgen Mar 14 '16 at 10:53
  • You need to save the API that is returned by the player here: `vg-player-ready="vm.onPlayerReady($API)"` not the one you created, that's just a config, not an API. If you want a global config, create a config in a service and inject that config in each controller where you have a Videogular player. – elecash Mar 14 '16 at 11:44
  • I save the API's in the service's players array on vg-player-ready in the videogular tag with ng-repeat (as in the link in your first comment). Then in a click-handler I loop through the API's in the players array and play/pause them - now all media should be kickstarted. In the views I use the configs from the service, but nothing is in fact kickstarted, because the player in the view generates a totally new API. I gues the API's from the players array should be the API of the players in the views. But how do I establish that connection? – Jørgen Mar 14 '16 at 13:00
  • Oh, you're trying to autoplay on Android. Well, you can't, and that's an OS limitation. Mobile phones can't autoplay video/audio files, this is done to avoid bandwidth consumption. User needs to click play manually to allow that. – elecash Mar 14 '16 at 15:20
  • As mentioned in my original question I've managed to autoplay on Android with plain html5 videoelements . One click handler at startup loads, plays, and pauses all video elements. After that autoplay by code is possible. I am trying to do something similar with videogular. Is it really totally impossible? – Jørgen Mar 14 '16 at 15:41
  • Probably you can't with Videogular unless you load the video/audio and send it to the source as a blob. Videogular doesn't load via XHR audio or video files, it relies on the browser. – elecash Mar 14 '16 at 17:16