2

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

Example: http://localhost:8999

由于端口可以更改，当按下播放按钮时，我需要手动将源传递给 videogular。

我试过的代码。

看法：

<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 资源的异步请求，切换源会不会有问题？

4

0 回答 0