-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
81 lines (56 loc) · 2.14 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Brightcove Angular Directive Videojs</title>
<style>
.ng-cloak{
display: none !important;
}
.video {
width: 640px;
height: 360px;
}
</style>
</head>
<body ng-app="app" class="ng-cloak">
<div ng-controller="page">
<div class="brightcove-async video" video-brightcoveid="{{video.brightcoveVideoId}}" video-uuid="video-{{video.brightcoveVideoId}}"></div>
</div>
<script src="//players.brightcove.net/XXXXXXXXXXXXX/default_default/index.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var app = angular.module('app', []);
// Controller
app.controller('page', ['$scope', function ($scope) {
$scope.video = {
uuid: 1,
brightcoveVideoId: XXXXXXXXXXXXX
}
}]);
// Directive
app.directive('brightcoveAsync', [function() {
return {
restrict: "CA",
replace: true,
transclude: true,
link: function postLink(scope, element, attrs) {
var myPlayer;
var playerHTML = '<video id="' + attrs.videoUuid + '" data-video-id="' + attrs.videoBrightcoveid + '" width="100%" height="100%" data-account="XXXXXXXXXXXXX" data-player="default" data-embed="default"></video>';
element[0].innerHTML = playerHTML;
bc(document.getElementById(attrs.videoUuid));
videojs(attrs.videoUuid).ready(function(){
myPlayer = this;
myPlayer.on('play', function(){
console.log('video has started');
});
myPlayer.on('ended', function(){
console.log('video has ended');
});
});
}
};
}]);
</script>
</body>
</html>