在Bitmovin Player中使用angularjs / ngDialog模式的问题

Question

I am trying to use an angularjs/ngDialog modal to display a Bitmovin video player dialog. 我正在尝试使用angularjs / ngDialog模式显示Bitmovin视频播放器对话框。 The sample code below loads and plays the video fine. 下面的示例代码可加载并正常播放视频。 The issue comes when I close the dialog using either the close button or clicking the background area and then try to reopen the dialog/player. 当我使用关闭按钮或单击背景区域关闭对话框，然后尝试重新打开对话框/播放器时，就会出现问题。 The player doesn't load and play. 播放器无法加载和播放。 Ideally I would like the player to pickup where it left off. 理想情况下，我希望播放器在不播放的地方继续播放。 When I use JWPlayer with the same angularjs/ngDialog code the video plays the 2nd, 3rd, ... times around. 当我将JWPlayer与相同的angularjs / ngDialog代码一起使用时，视频将播放第2、3，...次。

I'm new to angularjs. 我是angularjs的新手。 Any help is greatly appreciated. 任何帮助是极大的赞赏。

<!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>

Answer 1

It seems that the problem is that the player <div> does not exist any more when calling bitmovin.player("btmv-player") in killPlayer . 看来这个问题是球员<div>打电话时不存在任何更多bitmovin.player("btmv-player")在killPlayer 。

The following code should work. 下面的代码应该工作。 It uses the short cut bitmovin.player() instead of accessing via ID, which returns the last created 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>

Furthermore I suggest not mixing AngularJS and plain JavaScript as weird things can happen, especially if the project grows. 此外，我建议不要将AngularJS和纯JavaScript混合使用，因为可能会发生奇怪的事情，尤其是在项目不断增长的情况下。 You should consider to add all the JavaScript code into the app / controllers. 您应该考虑将所有JavaScript代码添加到应用程序/控制器中。

There's also a Github project to use the Bitmovin Player in Angular (maintained by MovingImage24 and not by Bitmovin): https://github.com/MovingImage24/mi-angular-bitdash-player I'm not sure how up to date it is kept, though. 还有一个Github项目在Angular中使用Bitmovin Player （由MovingImage24而非Bitmovin维护）： https : //github.com/MovingImage24/mi-angular-bitdash-player我不确定它是最新的保持，虽然。

在Bitmovin Player中使用angularjs / ngDialog模式的问题

问题描述

1 个解决方案

解决方案1
2 2017-01-12 15:48:36

在Bitmovin Player中使用angularjs / ngDialog模式的问题

问题描述

1 个解决方案

解决方案1 2 2017-01-12 15:48:36

解决方案1
2 2017-01-12 15:48:36