嵌入视频的方法

视频是现代网页中不可或缺的元素，能够丰富内容展示形式。HTML提供了多种嵌入视频的方法，从基础的<video>标签到第三方平台嵌入代码，每种方式都有其适用场景和优缺点。

使用HTML5 video标签

<video>是HTML5原生支持的视频播放方案，不需要依赖第三方插件。基本语法如下：

<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持HTML5视频
</video>

关键属性说明：

• width/height：设置播放器尺寸
• controls：显示默认控制条
• autoplay：自动播放（移动端可能受限）
• loop：循环播放
• muted：静音状态
• poster="image.jpg"：设置视频封面

多源格式支持通过<source>子元素实现，浏览器会从上到下选择第一个支持的格式。常见视频格式兼容性：

• MP4（H.264）：所有现代浏览器
• WebM：Chrome、Firefox、Edge
• Ogg：逐渐被淘汰

响应式视频实现

使视频自适应容器宽度：

<style>
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9宽高比 */
  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>

使用iframe嵌入第三方视频

主流视频平台都提供iframe嵌入代码：

YouTube嵌入示例

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

Vimeo嵌入示例

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

哔哩哔哩嵌入示例

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

高级视频控制API

通过JavaScript可以完全控制视频播放：

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

<div>
  <button onclick="playPause()">播放/暂停</button>
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">正常</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;
}

// 监听事件示例
vid.addEventListener("timeupdate", function() {
  console.log("当前播放位置：" + vid.currentTime);
});
</script>

视频字幕支持

通过<track>元素添加字幕：

<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字幕文件示例（subtitles_zh.vtt）：

WEBVTT

1
00:00:01.000 --> 00:00:04.000
这是第一句字幕

2
00:00:05.000 --> 00:00:08.000
这是第二句字幕

视频格式转换与优化

为了最佳兼容性，建议提供多种格式的视频文件。使用FFmpeg转换示例：

# 转换为MP4
ffmpeg -i input.mov -vcodec h264 -acodec aac -strict -2 output.mp4

# 转换为WebM
ffmpeg -i input.mov -vcodec libvpx -acodec libvorbis output.webm

# 生成缩略图
ffmpeg -i input.mp4 -ss 00:00:05 -vframes 1 thumbnail.jpg

视频懒加载技术

对于长页面中的视频，可以使用懒加载提升性能：

<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>

视频背景实现

全屏视频背景效果：

<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>视频背景示例</h1>
  <p>这里是内容文字...</p>
</div>

视频加密与DRM保护

对于需要版权保护的视频，可以使用加密DRM方案：

<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();
      // 这里需要实现许可证获取逻辑
    });
}
</script>

视频分析处理

使用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;
    
    // 绘制视频帧到Canvas
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    
    // 获取像素数据进行分析
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    
    // 示例：计算平均亮度
    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('平均亮度:', brightness);
    
    requestAnimationFrame(processFrame);
  }
  
  processFrame();
});
</script>