0
Итак, когда я нажимаю на навигационное меню учебника, он запускает функцию ng-click = "loadNewTutorial ($ index)", все работает нормально. TutorialNumber обновляется номером индекса и, в свою очередь, изменяется URL текущего видео. Единственная проблема заключается в том, что video.load()/video.play(), по-видимому, срабатывает до того, как это изменение произойдет в DOM, потому что видео всегда на 1 клик позади. Я имею в виду, что я могу щелкнуть элемент меню, чтобы загрузить второе учебное видео, но оно будет загружать первое, а затем в следующий раз, когда я нажму, он загрузит второй, затем, если я нажму первый, он будет застрял на втором пока я не нажму первый раз. Таким образом, текущее видео не загружает правильный URL-адрес вовремя и всегда на 1 клик позади! Как заставить функцию video.load() до тех пор, пока атрибут видео src в DOM не будет изменен до того, как он будет срабатывать?Ожидание изменения атрибута DOM src
<!DOCTYPE html>
<html ng-app="Tutorials">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="./functions.js"></script>
<script src="./tutorials.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script type="text/javascript" src="./script-ng.js"></script>
<link rel="stylesheet" href="main.css"></link>
</head>
<body ng-controller="getAnswers">
<div id="sidebar_left"><div id="header"></div>
<ul id="nav" ng-repeat="section in sets">
<li class="section_title {{section.active}}" >
{{section.name}}
</li>
<ul><li class="tutorial_title {{tutorial.active}}" ng-click="loadNewTutorial({{$index}})" ng-repeat="tutorial in section.tutorials">{{tutorial.name}}</li></ul>
</ul><span>{{score}}</span>
</div>
<div id="container">
<video id="video" controls>
<source src="{{videoURLs[tutorialNumber]}}.mp4"></source>
<source src="{{videoURLs[tutorialNumber]}}.webm"></source>
Your browser does not support the video tag.
</video>
<br />
<button id="reset">Replay</button>
<br />
<div id="pannel">
<div id="base">{{verbs.base}}</div>
<ul class="answers">
<li ng-click="checkAnswer(answer)" ng-repeat="answer in verbs.conjugations" class="{{answer.colorReveal}} answer {{answer.correct}}" id="answer{{$index}}">{{answer.text}}</li>
</ul>
</div>
<br />
<br />
<br />
<div id="warning"></div>
</div>
</body>
</html>
angular.module('Tutorials', ['functions', 'tutorials']).controller('getAnswers', function ($scope, $element) {
$scope.sectionNumber = 0;
$scope.tutorialNumber = 0;
$scope.loadNewVerbs = function() {
$scope.verbs = conjugate(conjugationsets[$scope.tutorialNumber][$scope.questionNumber]);
$scope.correct = $scope.verbs.conjugations[0].text;
fisherYates($scope.verbs.conjugations);
};
$scope.checkAnswer = function (answer) {
if (false) {//wait for tutorial to pause
$("#warning").text("Not yet!").fadeIn(300).delay(1400).fadeOut(300);
return;
};
answer.colorReveal = "reveal-color";
if (answer.text === $scope.correct) { //if correct skip to congratulations
$scope.questionNumber++;
if(sectionNumber === 0 && $scope.tutorialNumber ===0){ //if first video play congratulations etc
congrats();
}
setTimeout(function() {
$scope.loadNewVerbs();
$scope.$digest();
}, 2000);
} else { //if incorrect skip to try again msg
if(sectionNumber === 0 && $scope.tutorialNumber ===0){start(160.5); pause(163.8)}
}
};
$scope.sets = [{
active:"inactive",
name: "Conjugation",
tutorials: [
{active:"inactive",name: "ㅗ and ㅏ regular"},
{active:"inactive",name:"ㅜ, ㅓ and ㅣ regular"},
{active:"inactive",name:"ㅏ and ㅓ reductive"},
{active:"inactive",name: "ㅗ and ㅜ reductive"},
{active:"inactive",name: "ㅣ reductive"}]
}, {
active:"inactive",
name: "Sentence_Building",
tutorials: [
{active:"inactive",name:"Particles"},
{active:"inactive",name:"Word Order"}]
}];
$scope.video = $("#video").get(0);
$scope.videoURLs = ["ㅗㅏregular", "ㅜㅓㅣregular"];
$scope.loadNewTutorial = function (tut) {
$scope.score = 0;
$scope.questionNumber = 0;
if(tut){
$scope.tutorialNumber = tut;
}
video.load();
video.play();
video.hasPlayed = true;
$(video).bind('ended', endVideoHandler);
$scope.loadNewVerbs();
};
$scope.loadNewTutorial();
var congrats = function(){
if ($scope.questionNumber === 1) {start(164.15); pause(166.8); $scope.score++;
} else if ($scope.questionNumber === 2) {start(167.1); pause(170); $scope.score++;
} else if ($scope.questionNumber === 3) {
start(171.1); $scope.score ++;$scope.questionNumber = 0;$scope.tutorialNumber++;
}
}
function endVideoHandler() {
$(this).unbind('ended');
if (!this.hasPlayed) {
return;
}
$scope.tutorialNumber++;
$scope.$digest();
this.currentTime = 0;
$scope.loadNewTutorial();
}
});
var conjugationsets = [
["작다", "놀다", "닦다"],
["웃다", "울다", "멀다"]
];
var sectionNumber = 0;
var tutorialNumber = 0;
var questionNumber = 0;
$(function() {
$("#nav").accordion({
heightStyle: "content",
header: ".section_title"
});
$("#reset").click(function() {
currentTutorial.currentVideo.videoObject.currentTime = 0;
currentTutorial.currentVideo.start();
});
});
Прошу прощения, см. Редактирование, я был немым – Tules
исправил эту проблему, посмотрев на ответы со стороны, теперь у вас проблема с URL-адресом, см. Править – Tules