HTML5 Video Tag

Posted by On 9月 29, 2017 0 Comment

Video tag

HTML5v supports video tag to play video.

Attr

Name Description
controls Add video controls under display
autoplay Start video automatically
preload Load video option

Example

<body>
    <video id="video" src="resources/SampleVideo_1280x720_10mb.mp4" controls autoplay>
    </video>
</body>
</html>

Support Format

Support format depends on browser. These days browser tries to support a lot, but it still has
difference.

WebM, Ogg, MP4, MP3, WAVE, FLAC, etc…

Source candidate

For compatibility, we can set multiple candidates to play.

<video>
<source src='sample.ogg' type='video/ogg; codecs="theora, vorbis"'>
<source src='sample.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

We can set type and codecs.

Events

There are a lot of events detection function for video.

Ref : videoタグに使えるイベントハンドラ

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Video</title>
    <script type="text/javascript">
        window.onload = function() {
            var video = document.getElementById("video");
            video.onplay = function() {
                console.log("Start Media");
            }
            video.onended = function() {
                alert('Finish');
            }

            video.ontimeupdate = function(e){
                console.log(Math.round(video.currentTime));
            }
        };
    </script>
</head>
<body>
    <video id="video" src="resources/SampleVideo_1280x720_10mb.mp4" controls>
    </video>
</body>
</html>

TOPICS