Hinweise

Veranschaulicht Verwendung und Funktionsumfang des video Elements.

Eine Quelle (Theora), native Kontrollelemente

Mehrere Quellen, native Kontrollelemente

Eine Quelle (H.264), individuelle Kontrollemente

>

+

TED Talk, Larry Lessig, CC license

/* inspired by http://webkit.org/blog/140/html5-media-support/ */

var videoElem;
        var videoCont;
        var playButton;
        var showProgress = true;
        var videoLargeSize = true;

function startedPlaying() {
            showProgress = false;
            playButton.innerHTML = "||"
            playButton.className = "videobutton videoplay videofadeout";
        }
        function stoppedPlaying() {
            playButton.innerHTML = ">"
            playButton.className = "videobutton videoplay";
        }
        function updateProgress(ev) {
            if (!showProgress)
               return;
            if (ev.total)
                playButton.innerHTML = "Loading " + (100*ev.loaded/ev.total).toFixed(0) + "%";
            else
                playButton.innerHTML = "Loading...";
            playButton.className = "videobutton videoloading";
        }
        function initVideo() {
            videoElem = document.getElementById("videoelem");
            videoCont = document.getElementById("videocontainer");
            if (videoElem.play) {
              videoCont.style.display = "block";
            }
            playButton = document.getElementById("videoplaybutton");
            videoZoomButton = document.getElementById("videozoombutton");
            if (!videoElem.play) {
               playButton.style.display = "none";
               videoZoomButton.style.display = "none";
               return;
            }
            videoElem.addEventListener("play", startedPlaying);
            videoElem.addEventListener("pause", stoppedPlaying);
            videoElem.addEventListener("ended", function () {
                if (!videoElem.paused)
                    videoElem.pause();
                stoppedPlaying();
            });
            videoElem.addEventListener("progress", updateProgress);
            videoElem.addEventListener("begin", updateProgress);
            videoElem.addEventListener("canplaythrough", function () {
                 videoElem.play();
            });
            videoElem.addEventListener("error", function() {
                playButton.innerHTML = "Load failed";
            });
            videoElem.addEventListener("dataunavailable", function () {
                 if (!showProgress) {
                     showProgress = true;
                     playButton.innerHTML = "Loading...";
                     playButton.className = "videobutton videoloading";
                 }
            });
            videoZoomButton.addEventListener("click", function () {
                var container = document.getElementById("videocontainer");
                videoLargeSize = !videoLargeSize;
                if (videoLargeSize) {
                    container.style.width = "853px";
                    container.style.height = "480px";
                    videoZoomButton.innerHTML = "-";
                } else {
                    container.style.width = "400px";
                    container.style.height = "225px";
                    videoZoomButton.innerHTML = "+";
                }
            });
            playButton.addEventListener("click", function () {
                if (videoElem.paused) {
                    if (!videoElem.src)
                        videoElem.src = "ted-talks-larry-lessig.mp4";
                    if (videoElem.readyState == HTMLMediaElement.DATA_UNAVAILABLE)
                        videoElem.load();
                    if (videoElem.readyState == HTMLMediaElement.CAN_PLAY_THROUGH)
                        videoElem.play();
                } else
                    videoElem.pause();
            } );
        }