The error says, "Uncaught ReferenceError: a2 is not defined," in Chrome's Javascript Console, and it is on this line of the HTML: a2.start($("#hook"),"clips.json");
I thought there was a problem with a missing or not enough braces in the JavaScript code, but apparently not. I checked other syntax, but don't know the cause of the error.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>IIT News</title>
<script src="http://ift.tt/13wBVXk"></script>
<script src="a2.js"></script>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<style>
.starter-template {
padding: 40px 15px;
text-align: center;
}
</style>
</head>
<body>
<div id="hook">
</div>
<script>
a2.start($("#hook"),"clips.json");
</script>
</div><!-- /.container -->
</body>
</html>
JavaScript:
(function (a2, $, undefined) { //namespace
a2.id = {};
a2.name = {};
a2.description = {};
a2['content-url'] = {};
a2['thumb-url'] = {};
// Entry point
a2.start = function(hookElementSelection, dataurlForJsonFile) {
a2.id = {};
a2.name = {};
a2.description = {};
a2['content-url'] = {};
a2['thumb-url'] = {};
'<source src="'+a2['content-url']+'" type="video/mp4"></source>'+
document.getElementById('hook').innerHTML = '<div id="container">'+
'<video onended="playNext()" id="aVideo" width="470" height="470" preload="none" controls autoplay>'+
'<source src="a2[content-url]" type="video/mp4"></source>'+
'<source src="video4.ogg" type="video/ogg"></source>'+
'<source src="video4.webm" type="video/webm"></source>'+
'</video>'+
'<div id="controls">'+
'<button id="play">Play</button>'+
'<button id="stop" disabled>Stop</button>'+
'<button id="pause" disabled>Pause</button>'+
'<div id="progressBar">'+
'<div id="progress"></div>'+
'</div> '+
'</div>';
vidCount = 0;
var aVideo = document.getElementById("aVideo");
// Make an ajax call and parse data
var parsedData;
var callback = function(text) {
parsedData = JSON.parse(text);
vidCount = 0;
playNext();
};
// When page is loaded, JSON data is parsed & returned
function loadedFunction() {
// returning JSON data
ajax.get("clips.json", callback);
};
function playNext() {
if (!parsedData) {
return
}
var aVideo = document.getElementById("aVideo");
aVideo.src = parsedData[vidCount]['content-url'];
aVideo.play();
vidCount++;
};
};
document.addEventListener("DOMLoaded", setControls, false);
function setControls() {
// Select video element from page
var aVideo = document.getElementById("aVideo");
if (aVideo.canPlayType) {
// Remove default buttons
aVideo.removeAttribute("controls");
// Display custom buttons & progress bar
document.getElementById("controls").style.display="block";
document.getElementById("progress").style.display="block";
// Add event handlers to control the video element
aVideo.addEventListener("timeupdate", getProgress, false);
aVideo.addEventListener("end", vidEnd, false);
// enable and disable the controls buttons to reflect the player state
aVideo.addEventListener("play",function() {
document.getElementById("play").disabled=true;
document.getElementById("pause").disabled=false;
document.getElementById("stop").disabled=false;
}, false);
aVideo.addEventListener("pause", function() {
document.getElementById("play").disabled=false;
document.getElementById("pause").disabled=true;
document.getElementById("stop").disabled=false;
}, false);
// add event-handlers for control buttons
document.getElementById("play").addEventListener("click",playPlayback,false);
document.getElementById("stop").addEventListener("click",stopPlayback,false);
document.getElementById("pause").addEventListener("click",pausePlayback,false);
}
}
// event-handlers
function playback() {
// Play button pressed
document.getElementById("aVideo").play();
}
// Pause button pressed
function pausePlayback() {
document.getElementById("aVideo").pause();
}
// Stop button pressed; current play time is reset to 0
function stopPlayback() { var aVideo = document.getElementById("aVideo");
aVideo.pause();
aVideo.currentTime=0;
vidEnd();
}
// Video is finished or stopped
function vidEnd() {
// Reset progress bar var progress = document.getElementById("");
progress.style.left="0px";
// reset the state of buttons
document.getElementById("play").disabled=false;
document.getElementById("pause").disabled=true;
document.getElementById("stop").disabled=true;
}
// Update the progress bar
function getProgress() {
var barwidth = 470; var sliderwidth = 30;
// Get current time
var time = Math.round(this.currentTime);
// Get video play time
var duration = parseInt(this.duration);
// Calculate the position on progress bar
var position = barwidth * (time / duration);
if (isNaN(position)) return;
// Update progress bar
document.getElementById("progress").style.width=position + "px";
// Update the position of slider button
var sliderButton = document.getElementById("sliderButton");
if (position <= (barwidth - Math.round(sliderwidth / 2))) {
sliderButton.style.left=position + "px";
} else {
sliderButton.style.left=barwidth - Math.round(sliderwidth / 2);
}
}
})(window.a2 = window.a2 || {}, jQuery) //namespace
Aucun commentaire:
Enregistrer un commentaire