How to catch videogular play button event and manually load source

Question

I have videogular player. I need to catch when user clicks vg-play-pause-button or vg-overlay-play and send request to server to open a stream and then server returns back hostname with port on which stream is stared.

Example: http://localhost:8999

As port can change, I need to pass manually source to videogular when play button was pressed.

Code that I tried.

View:

<div class="videogular-container">
    <videogular vg-theme="config.theme">
        <vg-media vg-src="config.sources" vg-tracks="config.tracks"></vg-media>
        <vg-controls>
            <vg-play-pause-button ng-click="requestSource()"></vg-play-pause-button>
            <vg-time-display>{{ currentTime | millSecondsToTimeString }}</vg-time-display>
            <vg-scrub-bar>
                <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
            </vg-scrub-bar>
            <vg-time-display>{{ totalTime | millSecondsToTimeString }}</vg-time-display>
            <vg-volume>
                <vg-mute-button></vg-mute-button>
                <vg-volume-bar></vg-volume-bar>
            </vg-volume>
            <vg-fullscreen-button></vg-fullscreen-button>
        </vg-controls>
        <vg-overlay-play ng-click="requestSource()"></vg-overlay-play>
        <vg-poster vg-url='config.plugins.poster'></vg-poster>
    </videogular>
</div>

Angular Controller:

angular.module('myApp')
    .controller('MoviesShowController', function ($scope, $routeParams, $sce, MovieService, StreamService) {

        $scope.config = {
            sources: [],
            theme: 'bower_components/videogular-themes-default/videogular.css'
        };
        $scope.requestSource = function() {
            StreamService.getResource().get({ file: encodeURI($scope.movie[0].url)  }, function (stream) { 
                console.log(stream.url);
                $scope.config.sources = [
                    {src: $sce.trustAsResourceUrl(stream.url), type: 'video/mp4'},
                ];
            });
        };

    });

With this code nothing happens, but if I init player with sources already defined, player works. How can I add source manually on play button press ?

UPDATE:

Could there be problem with switching sources because of async request to http resource ?

How to catch videogular play button event and manually load source

0 Answers0