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