Kenhuang Academy
  • English

      • HTML5 Video

      Overview

      The HTML5 <video> element provides a standard way to embed video in webpages without relying on third-party plugins (like Flash).

      Basic Syntax

      <video src="movie.mp4" controls>
    Your browser does not support the video tag.
</video>

      Video Attributes

      Common Attributes

      <video 
    src="movie.mp4"
    width="640"
    height="360"
    controls
    autoplay
    loop
    muted
    poster="thumbnail.jpg"
    preload="auto">
    Your browser does not support the video tag.
</video>

      Attributes:

      • controls - Display playback controls
      • autoplay - Auto-play (most browsers require muted)
      • loop - Loop playback
      • muted - Mute audio
      • poster - Video thumbnail
      • preload - Preload strategy (none/metadata/auto)
      • width and height - Video dimensions

      Multiple Format Support

      Provide multiple video formats for cross-browser compatibility:

      <video width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

      Video Formats

      FormatMIME TypeBrowser Support
      MP4video/mp4Chrome, Firefox, Safari, Edge
      WebMvideo/webmChrome, Firefox, Opera
      Oggvideo/oggFirefox, Opera

      JavaScript Control

      Basic Control

      <video id="myVideo" width="640" height="360">
    <source src="movie.mp4" type="video/mp4">
</video>

<button onclick="document.getElementById('myVideo').play()">Play</button>
<button onclick="document.getElementById('myVideo').pause()">Pause</button>

<script>
    var video = document.getElementById("myVideo");
    
    function playVideo() {
        video.play();
    }
    
    function pauseVideo() {
        video.pause();
    }
</script>

      Video Events

      <script>
    video.addEventListener("play", function() {
        console.log("Video started playing");
    });
    
    video.addEventListener("pause", function() {
        console.log("Video paused");
    });
    
    video.addEventListener("ended", function() {
        console.log("Video ended");
    });
    
    video.addEventListener("timeupdate", function() {
        console.log("Current time: " + video.currentTime);
    });
</script>

      Responsive Video

      <style>
    .video-wrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        height: 0;
        overflow: hidden;
    }
    
    .video-wrapper video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>

<div class="video-wrapper">
    <video controls>
        <source src="movie.mp4" type="video/mp4">
    </video>
</div>

      Subtitles Support

      <video width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    <track 
        kind="subtitles" 
        src="subtitles_en.vtt" 
        srclang="en" 
        label="English"
        default>
    <track 
        kind="subtitles" 
        src="subtitles_zh.vtt" 
        srclang="zh" 
        label="Chinese">
</video>

      Best Practices

      1. Provide multiple formats for cross-browser compatibility
      2. Use poster attribute for video thumbnails
      3. Optimize file size for faster loading
      4. Avoid autoplay unless necessary and muted
      5. Provide subtitles for accessibility
      6. Responsive design for different screen sizes
      7. Provide fallback content for unsupported browsers

      Summary

      HTML5 Video element provides a powerful and flexible solution for video playback on webpages. By properly using its attributes and JavaScript API, you can create feature-rich video experiences.