使用angularjs / ngDialog模态与Bitmovin播放器的问题

时间：2016-12-27 23:18:01

标签： javascript angularjs ng-dialog bitmovin-player

我正在尝试使用angularjs / ngDialog模式来显示Bitmovin视频播放器对话框。下面的示例代码加载并播放视频。当我使用关闭按钮或单击背景区域关闭对话框然后尝试重新打开对话框/播放器时，会出现问题。播放器无法加载和播放。理想情况下，我希望玩家能够从中途停下来。当我使用具有相同angularjs / ngDialog代码的JWPlayer时，视频将播放第2，第3，......次。

我是angularjs的新手。非常感谢任何帮助。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>** Bitmovin AngularJS Modal Player</title>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel='stylesheet' href='css/ngDialog.css' type='text/css' media='all' />
    <link rel='stylesheet' href='css/ngDialog-theme-default.css' type='text/css' media='all' />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js?ver=1.5.8'></script>
    <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.6.4/js/ngDialog.min.js?ver=0.6.4'></script>
    <script type="text/javascript" src="https://bitmovin-a.akamaihd.net/bitmovin-player/stable/6.1.7/bitmovinplayer.min.js"></script>
</head>
<body>

<div class="container">
    <div class="content">
        <div ng-app="myApp" ng-controller="myModalController">
            <button ng-click="showVideoPlayerPopup()" class="btmv-button">WATCH</button>
        </div>
    </div>
</div>

<script type="text/javascript">

function playVideo() {
//var createPlayer = function () {
    var config = {
        key: "0b3b8038-7b11-4aa0-8717-1f848c76e436",
        source: {
            dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd'
        },
        style: {
            width: '50vw',
            aspectratio: '16/9'
        },
        playback : {
            autoplay    : true,
            muted       : false
        },
        events: {
            onReady: function(data) { 
                console.log('Video duration: ' + this.getDuration()  + "s" );
                console.log(data);
            },
            onPlay  : function(data) {
                console.log(data);
            },
            onPause : function(data) {
                console.log(data);
            },
            onSeek : function(data) {
                //updateTime();
                console.log(data);
            },
            onPlaybackFinished: function(data) {
                console.log('Video onPlaybackFinished: ' + this.getCurrentTime()  + "s", data );
                player.seek(0);
                console.log('Video onPlaybackFinished seek(0) time: ' + this.getCurrentTime()  + "s" );
//              player.destroy();
//              console.log('TGC Video onPlaybackFinished player destroyed! ');
            }, 
            onError : function(data) {
                console.error("Bitmovin Player error: " + data.code + ": " + data.message);
            }
        } // end events
    };

    var player = bitmovin.player('btmv-player');

    player.setup(config).then(function(value) {
        console.log('Successfully created Bitmovin Player instance');
    }, function(reason) {
        console.log('Error while creating Bitmovin Player instance: ${error.message}');
    });

    function updateTime(time) {
        document.getElementById("event").innerHTML ="The video has been seeked to "+JSON.stringify(player.getCurrentTime())+"s";
    }
    player.addEventHandler('onSeeked', function(timestamp) {
        updateTime( JSON.stringify( player.getCurrentTime() ) );
    });

};

function playbackFinished() {
    console.log('playbackFinished fired! ');
}

function killPlayer() {
    if ( confirm('Close the player?') ) {
        player.destroy();
        return true;
    }
    return false;
}

var app = angular.module('myApp',['ngDialog']);

app.controller('myModalController', function($scope, ngDialog) {
    $scope.ngDialog = ngDialog;
    $scope.showVideoPlayerPopup = function(video_path) {
        ngDialog.open({
            //animation : true,
            disableAnimation: true,
            scope       : $scope,
            template:   '<div id="btmv-player"></div>' +
                        '<br />' +
                        '<div id="event"></div>',
            plain       : true,
            className   : 'ngdialog-theme-default',
            closeByDocument: true,
            width       : 670,
            height      : 390,
            preCloseCallback: function(value) {
                //killPlayer();
                return true;
            }
        });
        $scope.$on('ngDialog.opened', function (e, $dialog) {
            playVideo();
            //createPlayer();
            console.log('ngDialog opened: ' + $dialog.attr('id'));
        });
        $scope.$on('ngDialog.closing', function (e, $dialog) {
            //killPlayer();
            console.log('ngDialog closing: ' + $dialog.attr('id'));
        });
        $scope.$on('ngDialog.closed', function (e, $dialog) {
            //killPlayer();
            console.log('ngDialog closed: ' + $dialog.attr('id'));
        });
    }
});
</script>

</body>
</html>

1 个答案:

答案 0 :(得分：2)

似乎问题是，在<div>中调用bitmovin.player("btmv-player")时，播放器killPlayer不再存在。

以下代码应该有效。它使用捷径bitmovin.player()而不是通过ID访问，ID返回最后创建的播放器。

<html lang="en">
<head>
    <title>** Bitmovin AngularJS Modal Player</title>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.6.4/css/ngDialog.css' type='text/css' media='all' />
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.6.4/css/ngDialog-theme-default.css' type='text/css' media='all' />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js?ver=1.5.8'></script>
    <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.6.4/js/ngDialog.min.js?ver=0.6.4'></script>
    <script type="text/javascript" src="https://bitmovin-a.akamaihd.net/bitmovin-player/stable/7/bitmovinplayer.js"></script>
</head>
<body>

<div class="container">
    <div class="content">
        <div ng-app="myApp" ng-controller="myModalController">
            <button ng-click="showVideoPlayerPopup()" class="btmv-button">WATCH</button>
        </div>
    </div>
</div>

<script type="text/javascript">

function playVideo() {
    var config = {
        key: "YOUR-PLAYER-KEY",
        source: {
            dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd'
        },
        style: {
            width: '50vw',
            aspectratio: '16/9'
        },
        playback : {
            autoplay    : true,
            muted       : false
        },
        events: {
            onReady: function(data) { 
                console.log('Video duration: ' + this.getDuration()  + "s" );
                console.log(data);
            },
            onPlay: function(data) {
                console.log(data);
            },
            onPaused: function(data) {
                console.log(data);
            },
            onSeek : function(data) {
                console.log(data);
            },
            onPlaybackFinished: function(data) {
                console.log('Video onPlaybackFinished: ' + this.getCurrentTime()  + "s", data );
                player.seek(0);
                console.log('Video onPlaybackFinished seek(0) time: ' + this.getCurrentTime()  + "s" );
            }, 
            onError : function(data) {
                console.error("Bitmovin Player error: " + data.code + ": " + data.message);
            }
        } // end events
    };

    var player = bitmovin.player('btmv-player');

    player.setup(config).then(function(value) {
        console.log('Successfully created Bitmovin Player instance');
    }, function(reason) {
        console.log('Error while creating Bitmovin Player instance: ${error.message}');
    });

    function updateTime(time) {
        document.getElementById("event").innerHTML ="The video has been seeked to "+JSON.stringify(player.getCurrentTime())+"s";
    }

    player.addEventHandler('onSeeked', function(timestamp) {
        updateTime( JSON.stringify( player.getCurrentTime() ) );
    });
};

function playbackFinished() {
    console.log('playbackFinished fired! ');
}

function killPlayer() {
    if ( confirm('Close the player?') ) {
        var player = bitmovin.player();
        if (player) {
            player.destroy();
        }
        return true;
    }
    return false;
}

var app = angular.module('myApp',['ngDialog']);

app.controller('myModalController', function($scope, ngDialog) {
    $scope.ngDialog = ngDialog;
    $scope.showVideoPlayerPopup = function(video_path) {
        ngDialog.open({
            disableAnimation: true,
            scope       : $scope,
            template:   '<div id="btmv-player"></div>' +
                        '<br />' +
                        '<div id="event"></div>',
            plain       : true,
            className   : 'ngdialog-theme-default',
            closeByDocument: true,
            width       : 670,
            height      : 390
        });
    }

    $scope.$on('ngDialog.opened', function (e, $dialog) {
        playVideo();
        console.log('ngDialog opened: ' + $dialog.attr('id'));
    });

    $scope.$on('ngDialog.closed', function (e, $dialog) {
        killPlayer();
        console.log('ngDialog closed: ' + $dialog.attr('id'));
    });
});
</script>

</body>
</html>

此外，我建议不要混合使用AngularJS和纯JavaScript，因为奇怪的事情会发生，特别是如果项目增长。您应该考虑将所有JavaScript代码添加到app / controllers中。

还有一个Github项目在Angular中使用Bitmovin Player（由MovingImage24而不是Bitmovin维护）：https://github.com/MovingImage24/mi-angular-bitdash-player 不过，我不确定它是如何更新的。

相关问题
最新问题