As a Java programmer, I'm new to the OOP-Approach of JavaScript and it's hard for me to find the best way to write code based on objects. I read a lot MDN and across the web to find a good way to code with JavaScript.
Just to see how can it look like, I realized the following functions: Add two INPUT-Elements to a video-element to provide a StartTime (second) and a EndTime (second) to enable a looping of the video in this give time range.
I expect there are already nice frameworks for dealing with video-elements (e. g. VideoJS) - but I just want to know how I can improve the object oriented parts of the code, how to handle events nicely, what is a really good approach to create and use objects, to add methods and so on...
Especially the event-handling (dealing with this inside a addEventListener-Function...) is interesting to me.
I hope this question is interesting also for others and somebody experienced can give me some hints.
Here is the code <HTML-site: index.html>:
<html>
<head>
<script src="script.js" type="text/javascript"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="controls" style="text-align: center"></div>
<div style="text-align: center">
<video id="video1" width="420">
<source src="somevideo.webm" type='video/webm' />
</video>
<p>
<input id="startFrom" type="number" name="startFrom" min="0" max="1000" value="0"> <input id="runUntil"
type="number" name="runUntil" min="0" max="1000" value="0" >
</p>
</div>
<div id="info" style="text-align: center; margin-top: 20px">
<input id="currentTime" type="number" min="0" value="0" readonly>
</div>
</body>
</html>
And here is the corresponding JavaScript script.js:
/**
* This script adds two input controls <startFrom>, <runUntil> to a "VideoPlayer"
* and allows to loop a certain range inside the given video
*
* Only works with HTML5 compatible browsers
*/
;
(function(window, undefined) {
var document = window.document;
/**
* Initial function to ensure the DOM-Content of the website is avaiable
*/
function go() {
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM ready");
new VideoPlayer();
}, false);
}
;
/**
* Wrapper-Class for the Video, which provides the video-Element,
* the control-button and the EventHandling for changing
* the startFrom and runUntil-Input-Elements
*/
function VideoPlayer() {
//global variable for the Video-Handler
_Vid_ = new Video("video1");
_Vid_.setControls();
var startFrom = document.getElementById("startFrom");
var runUntil = document.getElementById("runUntil");
startFrom.addEventListener("change", function(event) {
var value = event.target.value;
_Vid_.startTime = value;
console.log("StartFromValue: " + value);
}, false);
runUntil.addEventListener("change", function(event) {
var value = event.target.value;
if(value==0)
_Vid_.endTime = _Vid_.duration;
else
_Vid_.endTime = value;
console.log("RunUntilValue: " + value);
}, false);
}
/**
* Video-Class (Video-Handler) which provides all fields and methods necessary to
* steer the video
*
* Also initializes the video-instance with everything needed
*/
function Video(elementId) {
this.elementId = elementId;
if (this.elementId === undefined) {
console.log('No Video-Element given!');
return null;
}
console.log("creating element Video");
this.elementId = elementId;
this.videoElement = new Object();
this.videoIsReady = false;
this.startTime = 0.0;
this.endTime = 0.0;
this.duration = 0.0;
this.currentTime = 0.0;
this.source = "none";
this.loopEnabled = false;
this.videoElement = document.getElementById(this.elementId);
this.videoElement.addEventListener("loadedmetadata", function() {
console.log("metadata loaded...");
_Vid_.videoIsReady = true;
_Vid_.endTime = _Vid_.videoElement.duration;
_Vid_.duration = _Vid_.videoElement.duration;
_Vid_.source = _Vid_.videoElement.currentSrc.toString();
console.log(_Vid_.getInfos());
}, false);
//this Event and it's function realizes the loop capability
this.videoElement.addEventListener("timeupdate", function() {
var ct = _Vid_.videoElement.currentTime.valueOf();
_Vid_.currentTime = ct;
var ctElement = document.getElementById("currentTime");
ctElement.setAttribute("value", ct);
if (ct >= _Vid_.endTime) {
_Vid_.videoElement.currentTime = _Vid_.startTime;
console.log("LOOP");
}
}, false);
this.getInfos = function getInfos() {
console.log("getInfos()");
var outputTxt = "StartTime: " + _Vid_.startTime;
outputTxt += "\nDuration: " + _Vid_.duration;
outputTxt += "\nSource: " + _Vid_.source;
return outputTxt;
};
}
//another kind of how to set up a class-method
Video.prototype.setControls = function() {
var playPauseBtn = new VideoControl("playPause", "Play/Pause", "click", function() {
if (_Vid_.videoElement.paused)
_Vid_.videoElement.play();
else
_Vid_.videoElement.pause();
});
var layer = document.getElementById("controls");
layer.appendChild(playPauseBtn.btn);
};
//Class for realizing VideoControl-Buttons
function VideoControl(name, text, event, fn) {
this.name = name;
this.text = text;
this.event = event;
this.btn = document.createElement("button");
var txt = document.createTextNode(text);
this.btn.appendChild(txt);
this.btn.addEventListener(event, fn, false);
}
//call the start function
go();
})(window);
