我有一个应用程序，单击事件按钮时需要显示提示点。因此，当我单击 event1 按钮时，提示点应该出现在时间轴上的特定时间。对于已硬编码的值，提示点会显示，但在单击按钮时不会显示。
<!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 文件如下：
'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);
}
};
}]
);