Ανάπτυξη λογισμικού για εμπλουτισμένη εμφάνιση περιεχομένου βίντεο σε HTML5

Το τεκμήριο παρέχεται από τον φορέα :
Εθνικό και Καποδιστριακό Πανεπιστήμιο Αθηνών   

Αποθετήριο :
Πέργαμος   

δείτε την πρωτότυπη σελίδα τεκμηρίου
στον ιστότοπο του αποθετηρίου του φορέα για περισσότερες πληροφορίες και για να δείτε όλα τα ψηφιακά αρχεία του τεκμηρίου*



Ανάπτυξη λογισμικού για εμπλουτισμένη εμφάνιση περιεχομένου βίντεο σε HTML5

Κατσίκης Δημήτριος (EL)

born_digital_postgraduate_thesis
Διπλωματική Εργασία (EL)
Postgraduate Thesis (EN)

2012


Στόχος της παρούσας διπλωματικής διατριβής είναι η ανάπτυξη λογισμικού για την εμπλουτισμένη εμφάνιση περιεχομένου βίντεο. Αυτό το περιεχόμενο θα παρέχει πληροφορίες για τις διαφορετικές σκηνές του βίντεο. Ποιο συγκεκριμένα, θα εμφανίζονται εικόνες οι οποίες θα αντιπροσωπεύουν τις σκηνές του βίντεο. Το βίντεο και οι εμφανιζόμενες εικόνες θα είναι συγχρονισμένα και συντονισμένα. Για τον σκοπό αυτό θα εργαστούμε με 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)


Ελληνική γλώσσα

Βιβλιοθήκη και Κέντρο Πληροφόρησης » Βιβλιοθήκη Σχολής Θετικών Επιστημών
Σχολή Θετικών Επιστημών » Τμήμα Φυσικής » Διατμηματικό ΠΜΣ Ηλεκτρονικής και Ραδιοηλεκτρολογίας (Ρ/Η) και Ηλεκτρονικού Αυτοματισμού (H/A) » Κατεύθυνση Ηλεκτρονικός Αυτοματισμός (Η/Α, με πρόσθετη εξειδίκευση στην Πληροφορική και στα πληροφοριακά συστήματα)

https://creativecommons.org/licenses/by-nc/4.0/




*Η εύρυθμη και αδιάλειπτη λειτουργία των διαδικτυακών διευθύνσεων των συλλογών (ψηφιακό αρχείο, καρτέλα τεκμηρίου στο αποθετήριο) είναι αποκλειστική ευθύνη των αντίστοιχων Φορέων περιεχομένου.