文章/答案/技术大牛

发布

社区首页 >问答首页 >在Bitmovin播放器中使用angularjs/ngDialog模式的问题

问在Bitmovin播放器中使用angularjs/ngDialog模式的问题
EN

Stack Overflow用户

提问于 2016-12-28 07:18:01

回答 1查看 571关注 0票数 1

我正在尝试使用angularjs/ngDialog模式来显示Bitmovin视频播放器对话框。下面的示例代码可以正常加载和播放视频。当我使用关闭按钮或单击背景区域关闭对话框，然后尝试重新打开对话框/播放器时，问题就出现了。播放器不能加载和播放。理想情况下，我希望玩家从它停止的地方重新开始。当我使用带有相同angularjs/ngDialog代码的JWPlayer时，视频将播放第二个、第三个……一次一次。

我是第一次接触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>

javascript

angularjs

ng-dialog

bitmovin-player

回答 1

Stack Overflow用户

发布于 2017-01-12 23:48:37

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

下面的代码应该可以工作。它使用快捷方式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我不确定它是如何保持最新的。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41353400

复制

相似问题

问在Bitmovin播放器中使用angularjs/ngDialog模式的问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Bitmovin播放器中使用angularjs/ngDialog模式的问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Bitmovin播放器中使用angularjs/ngDialog模式的问题
EN