使用AngularJS/ngdialog模态与Bitmovin播放器发行

我正在尝试使用angularjs/ngdialog模态显示Bitmovin视频播放器对话框。下面的示例代码加载并播放视频正常。当我使用关闭按钮或单击背景区域，然后尝试重新打开对话框/播放器时，问题就来了。玩家不加载和玩。理想情况下，我希望玩家可以拾取它的停止。当我将JWPLAYER与相同的AngularJS/ngdialog代码使用时，视频播放了第二，第三，...遍布。

我是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>

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

以下代码应起作用。它使用捷径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代码添加到应用程序/控制器中。

还有一个GitHub项目可以在Angular中使用BitMovin播放器（由Movimimage24维护而不是Bitmovin维护）：https：//github.com/movingimage24/mi--- angular-angular-bitdash-player不过，我不确定它的最新状态。

相关内容

最新更新

热门标签：