Web学习网站

Appearance

<video> 标签 ​

<video> 标签用于在文档中嵌入视频内容，如电影片段或其他视频流。

概述 ​

<video> 标签是 HTML5 中引入的媒体标签，用于在网页中嵌入视频内容。它支持多种视频格式，包括 MP4、WebM、OGG 等。

语法 ​

html
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  您的浏览器不支持 video 标签。
</video>

基本用法 ​

简单视频播放器 ​

html
<video controls>
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

自动播放视频 ​

html
<video controls autoplay>
  <source src="video.mp4" type="video/mp4">
</video>

属性 ​

controls 属性 ​

添加播放控件（播放、暂停、音量、全屏等）：

html
<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

autoplay 属性 ​

视频就绪后自动播放：

html
<video controls autoplay>
  <source src="video.mp4" type="video/mp4">
</video>

loop 属性 ​

视频循环播放：

html
<video controls loop>
  <source src="video.mp4" type="video/mp4">
</video>

muted 属性 ​

视频静音：

html
<video controls muted>
  <source src="video.mp4" type="video/mp4">
</video>

poster 属性 ​

指定视频封面图像：

html
<video controls poster="poster.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

preload 属性 ​

指定视频预加载方式：

html
<!-- 不预加载 -->
<video controls preload="none">
  <source src="video.mp4" type="video/mp4">
</video>

<!-- 预加载元数据 -->
<video controls preload="metadata">
  <source src="video.mp4" type="video/mp4">
</video>

<!-- 预加载整个视频 -->
<video controls preload="auto">
  <source src="video.mp4" type="video/mp4">
</video>

width 和 height 属性 ​

指定视频播放器的尺寸：

html
<video controls width="640" height="480">
  <source src="video.mp4" type="video/mp4">
</video>

实际示例 ​

视频播放器 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>video 标签示例</title>
  <style>
    .video-container {
      max-width: 800px;
      margin: 2rem auto;
      padding: 1.5rem;
      background-color: #f8f9fa;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .video-info {
      text-align: center;
      margin-bottom: 1rem;
    }
    
    .video-info h3 {
      margin: 0 0 0.5rem 0;
      color: #333;
    }
    
    .video-info p {
      margin: 0;
      color: #666;
    }
    
    video {
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <div class="video-container">
    <div class="video-info">
      <h3>产品介绍视频</h3>
      <p>时长：2分钟</p>
    </div>
    
    <video controls poster="thumbnail.jpg">
      <source src="product-demo.mp4" type="video/mp4">
      <source src="product-demo.webm" type="video/webm">
      您的浏览器不支持 video 标签。
    </video>
  </div>
</body>
</html>

响应式视频 ​

html
<!DOCTYPE html>
<html>
<head>
  <style>
    .responsive-video {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 56.25%; /* 16:9 宽高比 */
    }
    
    .responsive-video video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="responsive-video">
    <video controls>
      <source src="video.mp4" type="video/mp4">
      您的浏览器不支持 video 标签。
    </video>
  </div>
</body>
</html>

JavaScript 控制 ​

动态控制视频 ​

html
<!DOCTYPE html>
<html>
<head>
  <style>
    .video-controls {
      text-align: center;
      margin: 2rem 0;
    }
    
    button {
      padding: 0.5rem 1rem;
      margin: 0 0.5rem;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <video id="myVideo" width="640" height="480">
    <source src="movie.mp4" type="video/mp4">
  </video>
  
  <div class="video-controls">
    <button onclick="playVideo()">播放</button>
    <button onclick="pauseVideo()">暂停</button>
    <button onclick="stopVideo()">停止</button>
    <button onclick="volumeUp()">音量+</button>
    <button onclick="volumeDown()">音量-</button>
    <button onclick="fullscreen()">全屏</button>
  </div>
  
  <script>
    const video = document.getElementById('myVideo');
    
    function playVideo() {
      video.play();
    }
    
    function pauseVideo() {
      video.pause();
    }
    
    function stopVideo() {
      video.pause();
      video.currentTime = 0;
    }
    
    function volumeUp() {
      if (video.volume < 1.0) {
        video.volume += 0.1;
      }
    }
    
    function volumeDown() {
      if (video.volume > 0.0) {
        video.volume -= 0.1;
      }
    }
    
    function fullscreen() {
      if (video.requestFullscreen) {
        video.requestFullscreen();
      } else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen();
      } else if (video.msRequestFullscreen) {
        video.msRequestFullscreen();
      }
    }
  </script>
</body>
</html>

支持的视频格式 ​

不同浏览器对视频格式的支持情况：

浏览器MP4WebMOGG
Chrome✓✓✓
Firefox✓✓✓
Safari✓✗✗
Edge✓✓✓

无障碍访问 ​

添加字幕 ​

html
<video controls>
  <source src="movie.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="中文">
  您的浏览器不支持 video 标签。
</video>

添加视频描述 ​

html
<figure>
  <video controls>
    <source src="tutorial.mp4" type="video/mp4">
    您的浏览器不支持 video 标签。
  </video>
  <figcaption>HTML 教程：如何使用 video 标签</figcaption>
</figure>

最佳实践 ​

  1. 提供多种格式：为不同浏览器提供多种视频格式
  2. 添加备用文本：为不支持 video 标签的浏览器提供备用文本
  3. 谨慎使用 autoplay：避免自动播放视频打扰用户
  4. 考虑带宽：优化视频文件大小以提高加载速度
  5. 提供控件：使用 controls 属性让用户控制视频播放
  6. 添加封面图像：使用 poster 属性提供视频封面
  7. 响应式设计：确保视频在不同设备上都能正常显示

浏览器兼容性 ​

<video> 标签在现代浏览器中得到良好支持：

  • Chrome 3+
  • Firefox 3.5+
  • Safari 3.1+
  • Edge
  • Internet Explorer 9+

注意事项 ​

  1. <video> 标签是块级元素
  2. 需要提供多种视频格式以确保跨浏览器兼容性
  3. 使用 <source> 标签指定不同格式的视频文件
  4. 为不支持的浏览器提供备用文本
  5. 考虑用户的网络带宽和数据使用
  6. 注意移动设备上的自动播放限制

相关标签 ​