Methods for embedding videos

Videos are an indispensable element of modern web pages, enriching content presentation. HTML provides various methods for embedding videos, from the basic <video> tag to third-party platform embed codes, each with its applicable scenarios and pros and cons.

Using the HTML5 Video Tag

The <video> tag is natively supported by HTML5 for video playback and does not rely on third-party plugins. The basic syntax is as follows:

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

Key attribute explanations:

• width/height: Set player dimensions
• controls: Display default control bar
• autoplay: Autoplay (may be restricted on mobile)
• loop: Loop playback
• muted: Mute state
• poster="image.jpg": Set video cover

Multiple source formats are supported via <source> child elements, with the browser selecting the first compatible format from top to bottom. Common video format compatibility:

• MP4 (H.264): All modern browsers
• WebM: Chrome, Firefox, Edge
• Ogg: Gradually being phased out

Responsive Video Implementation

Make videos adapt to container width:

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

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

Embedding Third-Party Videos Using iframe

Major video platforms provide iframe embed codes:

YouTube Embed Example

<iframe width="560" height="315" 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

Vimeo Embed Example

<iframe src="https://player.vimeo.com/video/VIDEO_ID" 
  width="640" height="360" 
  frameborder="0" 
  allow="autoplay; fullscreen" 
  allowfullscreen>
</iframe>

Bilibili Embed Example

<iframe src="//player.bilibili.com/player.html?aid=VIDEO_AID&bvid=BVID&cid=CID" 
  scrolling="no" 
  border="0" 
  frameborder="no" 
  framespacing="0" 
  allowfullscreen="true">
</iframe>

Advanced Video Control API

Full control over video playback via JavaScript:

<video id="myVideo" width="320" height="176">
  <source src="video.mp4" type="video/mp4">
</video>

<div>
  <button onclick="playPause()">Play/Pause</button>
  <button onclick="makeBig()">Enlarge</button>
  <button onclick="makeSmall()">Shrink</button>
  <button onclick="makeNormal()">Normal</button>
</div>

<script>
const vid = document.getElementById("myVideo");

function playPause() {
  vid.paused ? vid.play() : vid.pause();
}

function makeBig() {
  vid.width = 640;
}

function makeSmall() {
  vid.width = 160;
}

function makeNormal() {
  vid.width = 320;
}

// Event listener example
vid.addEventListener("timeupdate", function() {
  console.log("Current playback position: " + vid.currentTime);
});
</script>

Video Subtitle Support

Add subtitles using the <track> element:

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文" default>
</video>

WebVTT subtitle file example (subtitles_zh.vtt):

WEBVTT

1
00:00:01.000 --> 00:00:04.000
This is the first subtitle.

2
00:00:05.000 --> 00:00:08.000
This is the second subtitle.

Video Format Conversion and Optimization

For optimal compatibility, provide multiple video formats. FFmpeg conversion example:

# Convert to MP4
ffmpeg -i input.mov -vcodec h264 -acodec aac -strict -2 output.mp4

# Convert to WebM
ffmpeg -i input.mov -vcodec libvpx -acodec libvorbis output.webm

# Generate thumbnail
ffmpeg -i input.mp4 -ss 00:00:05 -vframes 1 thumbnail.jpg

Video Lazy Loading Technique

For videos in long pages, use lazy loading to improve performance:

<video width="320" height="240" controls preload="none" poster="placeholder.jpg">
  <source data-src="video.mp4" type="video/mp4">
</video>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const lazyVideos = [].slice.call(document.querySelectorAll("video[data-src]"));
  
  if ("IntersectionObserver" in window) {
    const lazyVideoObserver = new IntersectionObserver(function(entries) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = videoSource.dataset.src;
            }
          }
          video.target.load();
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });
    
    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
});
</script>

Video Background Implementation

Fullscreen video background effect:

<style>
#video-background {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}
.content {
  position: relative;
  z-index: 1;
  color: white;
  padding: 20px;
}
</style>

<video autoplay muted loop id="video-background">
  <source src="background.mp4" type="video/mp4">
</video>

<div class="content">
  <h1>Video Background Example</h1>
  <p>Here is the content text...</p>
</div>

Video Encryption and DRM Protection

For copyright-protected videos, use encrypted DRM solutions:

<video id="video" controls>
  <source src="encrypted-video.mp4" type="video/mp4">
</video>

<script>
const video = document.getElementById('video');

if ('MediaKeys' in window) {
  const video = document.querySelector('video');
  const config = [{
    initDataTypes: ['cenc'],
    videoCapabilities: [{
      contentType: 'video/mp4;codecs="avc1.42E01E"'
    }]
  }];
  
  navigator.requestMediaKeySystemAccess('com.widevine.alpha', config)
    .then(function(keySystemAccess) {
      return keySystemAccess.createMediaKeys();
    })
    .then(function(mediaKeys) {
      video.setMediaKeys(mediaKeys);
      const session = mediaKeys.createSession();
      // Implement license acquisition logic here
    });
}
</script>

Video Analysis and Processing

Analyze video content using Canvas:

<video id="source-video" src="video.mp4" controls></video>
<canvas id="output-canvas"></canvas>

<script>
const video = document.getElementById('source-video');
const canvas = document.getElementById('output-canvas');
const ctx = canvas.getContext('2d');

video.addEventListener('play', function() {
  function processFrame() {
    if (video.paused || video.ended) return;
    
    // Draw video frame to Canvas
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    
    // Get pixel data for analysis
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    
    // Example: Calculate average brightness
    let brightness = 0;
    for (let i = 0; i < data.length; i += 4) {
      brightness += (data[i] + data[i+1] + data[i+2]) / 3;
    }
    brightness = brightness / (data.length / 4);
    console.log('Average brightness:', brightness);
    
    requestAnimationFrame(processFrame);
  }
  
  processFrame();
});
</script>