1
BitMovin 비디오 플레이어 대화 상자를 표시하기 위해 angularjs/ngDialog 모달을 사용하려고합니다. 아래 샘플 코드는 비디오를로드하여 재생합니다. 닫기 버튼을 사용하거나 배경 영역을 클릭하여 대화 상자를 닫은 다음 대화 상자/플레이어를 다시 열려고하면 문제가 발생합니다. 플레이어가로드 및 재생되지 않습니다. 이상적으로 나는 그 선수가 멈추었을 때 픽업을하고 싶습니다. 동일한 angularjs/ngDialog 코드로 JWPlayer를 사용하면 비디오가 2, 3, ... 번 재생됩니다.Bitmovin 플레이어에서 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>