我有一个应用程序，单击事件按钮时需要显示提示点。因此，当我单击event1按钮时，cuepoint应该出现在时间轴上的特定时间。 对于已经硬编码的值，将显示提示点，但不会在单击按钮时显示。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css\default.css" />
<script src="bower_components\angular\angular.js"></script>
<script src="bower_components\angular-sanitize\angular-sanitize.min.js"></script>
<script src="bower_components\videogular\videogular.js"></script>
<script src="bower_components\videogular-controls\vg-controls.js"></script>
<script src="bower_components\videogular-cuepoints\cuepoints.js"></script>
<script src="bower_components\videogular-overlay-play\vg-overlay-play.js"></script>
<script src="js\app.js"></script>
</head>
<body>[The first arrow shows the hardcoded point and the second is the one generated after clicking on the event1 button. The style is not gettign applied due to which the cuepoint cannot be seen][1]
<div ng-app="myApp">
<div ng-controller="HomeCtrl as controller" class="videogular-container">
<videogular vg-player-ready="controller.onPlayerReady($API)" vg-theme="controller.config.theme.url">
<vg-media vg-src="controller.config.sources"
vg-tracks="controller.config.tracks">
</vg-media>
<vg-controls vg-autohide="controller.config.plugins.controls.autoHide" vg-autohide-time="controller.config.plugins.controls.autoHideTime">
<vg-play-pause-button></vg-play-pause-button>
<vg-time-display>{{ currentTime | date: 'mm:ss' :'+0000'}}</vg-time-display>
<vg-scrub-bar>
<vg-scrub-bar-buffer></vg-scrub-bar-buffer>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
<vg-scrub-bar-cue-points class="event1" vg-cue-points="controller.config.plugins.cuepoints.points.event1">
</vg-scrub-bar-cue-points>
<vg-scrub-bar-cue-points class="event2" vg-cue-points="controller.config.plugins.cuepoints.points.event2">
</vg-scrub-bar-cue-points>
<vg-scrub-bar-cue-points class="event3" vg-cue-points="controller.config.plugins.cuepoints.points.event3">
</vg-scrub-bar-cue-points>
</vg-scrub-bar>
<vg-time-display>{{ timeLeft | date: 'mm:ss' :'+0000' }}</vg-time-display>
<vg-time-display>{{ totalTime | date: 'mm:ss' :'+0000'}}</vg-time-display>
<vg-volume>
<vg-mute-button></vg-mute-button>
<vg-volume-bar></vg-volume-bar>
</vg-volume>
<div class="my-button iconButton" ng-click="controller.addEvent((currentTime/1000),'event1')">EVENT1</div>
<div class="my-button iconButton" ng-click="controller.addEvent((currentTime/1000),'event2')">EVENT2</div>
<div class="my-button iconButton" ng-click="controller.addEvent((currentTime/1000),'event3')">EVENT3</div>
<vg-fullscreen-button></vg-fullscreen-button>
</vg-controls>
</videogular>
</div>
</div>
</body>
</html>
，app.js文件为as-
'use strict';
angular.module('myApp',
[
"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
"uk.ac.soton.ecs.videogular.plugins.cuepoints",
]
)
.controller('HomeCtrl',
["$sce","$scope", function ($sce,$scope) {
this.onConsoleCuePoint = function onConsoleCuePoint(currentTime, timeLapse, params) {
var percent = (currentTime - timeLapse.start) * 100 / (timeLapse.end - timeLapse.start);
this.consoleCuePointsMessages = "time: " + currentTime + " -> (start/end/percent) " + timeLapse.start + "/" + timeLapse.end + "/" + percent + "% = " + params.message + "\n";
};
this.config = {
preload: "none",
sources: [
{src: $sce.trustAsResourceUrl("video/sample_highres.mp4"), type: "video/mp4"}],
theme: {
url: "bower_components/videogular-themes-default/videogular.css"
},
plugins: {
controls: {
autoHide: true,
autoHideTime: 5000
},
cuepoints: {
theme: {
url:["css/cuepoints.css"
],
},
points: {
event1: [
{
timeLapse: {
start: 15
},
onEnter: this.onConsoleCuePoint.bind(this),
onLeave: this.onConsoleCuePoint.bind(this),
onUpdate: this.onConsoleCuePoint.bind(this),
onComplete: this.onConsoleCuePoint.bind(this),
params: {
}
}
],
event2: [
{
timeLapse: {
start: 10
},
onEnter: this.onConsoleCuePoint.bind(this),
onLeave: this.onConsoleCuePoint.bind(this),
onUpdate: this.onConsoleCuePoint.bind(this),
onComplete: this.onConsoleCuePoint.bind(this),
params: {
}
}
],
event3: [
{
timeLapse: {
start: 50
},
onEnter: this.onConsoleCuePoint.bind(this),
onLeave: this.onConsoleCuePoint.bind(this),
onUpdate: this.onConsoleCuePoint.bind(this),
onComplete: this.onConsoleCuePoint.bind(this),
params: {
}
}
]
}
}
}
};
this.addEvent = function(num,eventtype){
var point = {
timeLapse: {
start: num
},
onLeave: this.onConsoleCuePoint.bind(this),
onUpdate: this.onConsoleCuePoint.bind(this),
onComplete: this.onConsoleCuePoint.bind(this),
params: {
}
}
if(eventtype=='event1')
{
var point={
timeLapse: {
start: num
},
onLeave: this.onConsoleCuePoint.bind(this),
onUpdate: this.onConsoleCuePoint.bind(this),
onComplete: this.onConsoleCuePoint.bind(this),
params: {
}
}
this.config.plugins.cuepoints.points.event1.push(point);
}
else if(eventtype=='event2')
{
var point={
timeLapse: {
start: num
},
onLeave: this.onConsoleCuePoint.bind(this),
onUpdate: this.onConsoleCuePoint.bind(this),
onComplete: this.onConsoleCuePoint.bind(this),
params: {
}
}
this.config.plugins.cuepoints.points.event2.push(point);
}
else if(eventtype=='event3')
{
var point={
timeLapse: {
start: num
},
onLeave: this.onConsoleCuePoint.bind(this),
onUpdate: this.onConsoleCuePoint.bind(this),
onComplete: this.onConsoleCuePoint.bind(this),
params: {
}
}
this.config.plugins.cuepoints.points.event3.push(point);
}
};
}]
);