插入视频: <video>

4.1 <video> 标签基础

使用 <video> 元素在网页上插入视频，能在浏览器中直接播放视频内容。 这个元素提供了丰富的播放设置功能，包括支持不同的格式、通过 JavaScript 的属性和方法进行控制。让我们详细了解一下这个元素。

最简单的例子

<video> 标签使用 src 属性来指定视频文件的路径。也可以添加 controls 属性来显示标准的控制元素，比如播放、暂停和音量调节按钮。

    
      <video src="videofile.mp4" controls></video>
    
  

多来源示例

为了支持不同的浏览器，可以用 <source> 标签指定多个视频源。 这样浏览器就能选择支持的视频格式。

    
      <video controls>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Your browser does not support the video element.
      </video>
    
  

<video> 标签的属性

• src: 指定视频文件的路径
• controls: 显示播放控制元素
• autoplay: 页面加载时自动播放视频
• loop: 视频播放结束后循环播放
• muted: 加载时静音
• preload: 指示浏览器应如何加载视频。可选值：none、metadata、auto
• width 和 height: 设置视频播放器的宽度和高度
• poster: 指定一个占位图片，在视频播放前显示

4.2 主要属性

1. 自动播放

autoplay 属性让视频文件在页面加载后自动开始播放。 和音频一样，使用这个属性要谨慎，以免惹恼用户。

    
      <video src="videofile.mp4" autoplay></video>
    
  

2. 视频循环播放

loop 属性表示视频文件应该无限循环播放。 这对背景视频或动画很有用。

    
      <video src="videofile.mp4" loop></video>
    
  

3. 静音

muted 属性在加载时将视频文件静音。如果你想让视频默认无声播放，而用户可以根据需要打开声音，这会很有用。

    
      <video src="videofile.mp4" muted></video>
    
  

4. 预加载

preload 属性指示浏览器在页面加载时应该如何预加载视频文件。 它可以取三个值之一：

• none: 浏览器不应预加载视频
• metadata: 浏览器只应加载元数据（时长、尺寸等）
• auto: 浏览器应在页面加载时完全加载视频

    
      <video src="videofile.mp4" preload="auto"></video>
    
  

5. 占位图片

poster 属性指定在视频开始播放前显示的占位图片。 这对向用户提供视频内容的视觉信息很有帮助。

    
      <video src="videofile.mp4" poster="posterimage.jpg"></video>
    
  

4.3 支持的视频格式

为确保跨浏览器的兼容性，建议使用多种视频格式。 最常见的格式包括 MP4、WebM 和 OGG。

MP4 格式

MP4 (MPEG-4 Part 14) 是最流行的视频格式之一。多数浏览器和设备都支持它。 MP4 使用有损压缩，能在较小的文件大小下提供良好的视频质量。

示例：

    
      <video src="videofile.mp4" type="video/mp4"></video>
    
  

WebM 格式

WebM 是为互联网使用设计的开放视频压缩格式。多数现代浏览器都支持它，提供了良好的视频质量。

示例：

    
      <video src="videofile.webm" type="video/webm"></video>
    
  

OGG 格式

OGG (Ogg Theora) 是一个开放的视频格式，许多浏览器支持。这个格式提供了良好的视频质量，常作为 MP4 和 WebM 的替代。

示例：

    
      <video src="videofile.ogv" type="video/ogg"></video>
    
  

为了兼容性使用多种格式的示例

为了确保跨浏览器的兼容性，建议在不同的格式中指定多个视频源。 浏览器会选择第一个支持的格式。

    
      <video width="600" controls autoplay muted>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Your browser does not support the video element.
      </video>