1

我正在尝试使用 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>
4

1 回答 1

3

看来问题是<div>调用的时候玩家已经不存在bitmovin.player("btmv-player")killPlayer

以下代码应该可以工作。它使用快捷bitmovin.player()方式而不是通过 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 Player(由 MovingImage24 维护,而不是由 Bitmovin 维护):https ://github.com/MovingImage24/mi-angular-bitdash-player 我不确定它是最新的保留,但。

于 2017-01-12T15:48:36.563 回答