Question

我有视频播放器。当用户点击vg-play-pause-button或vg-overlay-play并向服务器发送请求以打开流然后服务器返回带有端口的主机名时，我需要捕获。

Example: http://localhost:8999

由于端口可以更改，我需要在按下播放按钮时手动将源传递到视频。

我试过的代码。

查看：

<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.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'},
                ];
            });
        };

    });

使用此代码没有任何反应，但如果我使用已定义的源启动播放器，则播放器可以正常工作。如何在播放按钮上手动添加源？

更新

由于对http资源的异步请求，是否存在切换源的问题？

如何捕获视频播放按钮事件并手动加载源

0 个答案: