0
所以當我點擊教程導航菜單時，它觸發了ng-click =「loadNewTutorial（$ index）」函數，一切正常。tutorialNumber被索引號更新並且依次更改當前視頻的網址。唯一的問題是video.load（）/ video.play（）顯然會在DOM發生變化之前觸發，因爲視頻始終是一次點擊。我的意思是我可以點擊菜單項來加載第二個教程視頻，但它會加載第一個，然後下一次我點擊它會加載第二個，然後如果我再次點擊第一個，它會卡在第二個直到我再次點擊第一個。所以目前的視頻並沒有及時加載正確的網址，並且一直點擊一下！如何使video.load（）函數等待，直到DOM中的視頻src屬性在觸發之前被更改？等待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 2013-02-26 19:35:25
通過查看stewies的答案解決了這個問題，現在有URL問題，請參閱編輯 – Tules 2013-02-26 20:36:26