Στόχος της παρούσας διπλωματικής διατριβής είναι η ανάπτυξη λογισμικού για την
εμπλουτισμένη εμφάνιση περιεχομένου βίντεο. Αυτό το περιεχόμενο θα παρέχει
πληροφορίες για τις διαφορετικές σκηνές του βίντεο. Ποιο συγκεκριμένα, θα
εμφανίζονται εικόνες οι οποίες θα αντιπροσωπεύουν τις σκηνές του βίντεο. Το
βίντεο και οι εμφανιζόμενες εικόνες θα είναι συγχρονισμένα και συντονισμένα.
Για τον σκοπό αυτό θα εργαστούμε με Javascript και HTML5. Θα χρησιμοποιήσουμε
κατά κύριο λόγο τα νέα element του HTML5 <video> και <canvas>.
Η παραπάνω λειτουργικότητα θα υλοποιηθεί ως ένα custom HTML tag με όνομα
'scenes'. Η υλοποίηση του scenes θα γίνει στην γλώσσα Javascript.
Χρησιμοποιούμε μία τεχνική για την δημιουργία custom HTML tag από μία κλάση
Javascript. Το αποτέλεσμα είναι το HTML tag <scenes>. Η συμπεριφορά του είναι
όμοια με αυτήν των κανονικών HTML tag. Τα attribute που διαθέτει είναι:
videoID, number, frames, unit, fps. Το scenes, επιπλέον, μπορεί να
χρησιμοποιηθεί και ως αντικείμενο Javascript. Η μέθοδος δημιουργίας του
(constructor method) είναι scenes(tag, video, frames, number).
Το tag <scenes> είναι μια συνεχώς μεταβαλλόμενη μπάρα από εικόνες τοποθετημένες
η μία δίπλα στην άλλη. Οι εμφανιζόμενες εικόνες είναι επιλεγμένα frames από το
βίντεο. Η κεντρική εικόνα είναι το πρώτο frame της τρέχουσας σκηνής του βίντεο.
Οι εικόνες στα δεξιά είναι τα πρώτα frame των σκηνών που ακολουθούν και οι
εικόνες στα αριστερά είναι τα πρώτα frame των σκηνών που προηγούνται. Ο αριθμός
των εμφανιζόμενων σκηνών προσδιορίζεται από το attribute number και τα frame τα
οποία θα αποσπαστούν από το βίντεο για να αντιπροσωπεύσουν την αρχή των σκηνών
προσδιορίζονται από το attribute frames. Το μήκος του <scenes> είναι πάντα ίσο
με το μήκος του βίντεο ανεξάρτητα από των αριθμό των εμφανιζόμενων εικόνων. Αν
πατήσουμε με το ποντίκι πάνω σε μια εμφανιζόμενη εικόνα το βίντεο θα πάει στο
αντίστοιχο frame. Περισσότερες λεπτομέρειες για την χρήση και την
λειτουργικότητα του scenes στο documentation(τεκμηρίωση) στο παράρτημα
'Τεκμηρίωση'.
Στα επόμενα κεφάλαια εξηγούμε μέσω απλών παραδειγμάτων πως μπορούμε να
χειριστούμε εφαρμογές που περιέχουν element <scenes> και πως μπορούμε να
χρησιμοποιήσουμε το tag <scenes> για να αναπτύξουμε τις δικές μας εφαρμογές.
Για να δοκιμάσουμε αυτές τις εφαρμογές χρησιμοποιούμε τον περιηγητή (browser)
Firefox. Τέλος, στο πιο σημαντικό τμήμα της παρούσας εργασίας, παραθέτουμε
ολόκληρο τον κώδικα της υλοποίησης μας και παρέχουμε μία λεπτομερή επεξήγηση
αυτού του κώδικα γραμμή προς γραμμή.
(EL)
The aim of this master thesis is developing software for enhanced video content
presentation. This content provides information about the different scenes of
the video. Specifically, images represents video scenes will be displaying. The
video and the displaying images will be synchronized and coordinated. For this
purpose we worked with Javascript and HTML5. We will mainly use the new HTML5
elements <video> and <canvas>.
The functionality above implemented as a custom HTML tag named 'scenes'. The
implementation of scenes was done in Javascript language. We used a technique
to create a custom HTML tag from a Javascript class. The result is the HTML tag
<scenes>. It's behavior is similar to normal HTML tags. Its attributes are:
videoID, number, frames, unit, fps. Scenes, also, can used as a Javascript
object. Its constructor method is scenes(tag, video, frames, number).
The tag <scenes> is an ever-changing bar of images placed next to each other.
The displaying images are selected frames from the video. The central image is
the first frame of the current scene of the video. The images in the right are
the first frames of the following scenes and the images in the left are the
first frames from the previews scenes. The number of displaying images is
specified from attribute number and the frames will be captured from the video
to represent the start of scenes are specified from attribute frames. The
length of <scenes> is always equal to video length, regardless of the number of
displaying images. If you click on an displaying image the video goes to the
corresponding frame. More details about the use and functionality of scenes in
the documentation in the annex 'Documentation'.
In the following chapters we explain via simple examples how to use
applications which contains scenes elements and how to use scenes tag to
develop custom applications. To test these applications we use the browser
Firefox. Finally, in the most significant part of this thesis, we quote the
whole code of our implementation and we provide a detailed illustration of this
code line by line.
(EN)