Σύνδεση
Μενού

HTML5 Video + DOM

HTML5 Video + DOM

HTML5 <video> Πάρτε τον έλεγχο Χρησιμοποιώντας το DOM

Το στοιχείο <video> της HTML5 έχει, μεθόδους, ιδιότητες και συμβάντα.

Υπάρχουν μέθοδοι για την αναπαραγωγή, παύση, και τη φόρτωση για παράδειγμα.
Υπάρχουν ιδιότητες (π.χ. διάρκεια, ένταση, αναζήτηση) που μπορείτε να διαβάσετε ή να ρυθμίσετε.

Υπάρχουν επίσης, τα DOM γεγονότα που μπορούν να σας ειδοποιούν σχετικά, για παράδειγμα, όταν το στοιχείο <video> αρχίζει να παίζει, κάνει παύση, τελειώνει  κλπ.

Το παρακάτω παράδειγμα δείχνει με απλό τρόπο, πώς να εισάγετε ένα στοιχείο <video> , να ορίσετε τις ιδιότητες του καθώς και να καλέσετε μεθόδους.

<!DOCTYPE html>
<html>
<body>
    <div style="text-align:center">
        <button onclick="playPause()">Play/Pause</button>
        <button onclick="makeBig()">Big</button>
        <button onclick="makeSmall()">Small</button>
        <button onclick="makeNormal()">Normal</button>
        <br />
        <video id="video1" width="420">
            <source src="http://www.stigmahost.com/wp-content/uploads/2012/05/intro.mp4" type="video/mp4" />
            <source src="http://www.stigmahost.com/wp-content/uploads/2012/05/intro.ogg" type="video/ogg" />
            Your browser does not support HTML5 video.
        </video>
    </div>
    <script type="text/javascript">
        var myVideo=document.getElementById("video1");

        function playPause()
        {
            if(myVideo.paused)
            {
                myVideo.play();
            }
            else
            {
                myVideo.pause();
            }
        }

        function makeBig()
        {
            myVideo.width=560;
        }

        function makeSmall()
        {
            myVideo.width=320;
        }

        function makeNormal()
        {
            myVideo.width=420;
        }
    lt;/script>
    <center>
        <p>
            <a href="http://www.stigmahost.com/" target="_blank">StigmaHost</a>.
        </p>
    </center>
</body>
</html>

Δείτε το σε εφαρμογή εδώ

HTML5 <video> – Methods, Properties και Events

Ο παρακάτω πίνακας παραθέτει τις μεθόδους βίντεο, ιδιότητες, καθώς και εκδηλώσεις που υποστηρίζονται από τα περισσότερα προγράμματα περιήγησης:

Methods Properties Events
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
duration timeupdate
ended ended
error abort
paused empty
muted emptied
seeking waiting
volume loadedmetadata
height
width

Σημείωση: Από τις ιδιότητες βίντεο, μόνο το videoWidth και το  videoHeight είναι άμεσα διαθέσιμα. Οι άλλες ιδιότητες  είναι διαθέσιμες αφού πρώτα φορτώσουν τα μετα-δεδομένα του βίντεο.