HTML5视频播放素材如何适配多终端兼容？

HTML5 视频播放基础代码

这是最核心、最简单的实现方式，只需要几行 HTML 代码。

基本结构

使用 <video> 标签，并通过 src 属性指定视频文件的路径。

<video src="my-video.mp4" width="640" height="360" controls>
  您的浏览器不支持 HTML5 视频。
</video>

• src: 视频文件的 URL。
• width / height: 设置视频播放器的宽度和高度。
• controls: 显示浏览器默认的播放控件（播放/暂停、进度条、音量、全屏等）。
• 标签内的文本是“回退内容”，当浏览器不支持 <video> 标签时会显示。

多格式兼容（最佳实践）

由于不同浏览器对视频编码格式的支持不同（Safari 主要支持 MP4，而 Chrome/Firefox 也支持 WebM），为了获得更好的兼容性，建议提供多种格式的视频源。<source> 标签可以完美实现这一点。

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

浏览器会从上到下依次尝试加载 <source> 标签中指定的视频文件，直到找到第一个它支持的格式。

常用属性

除了 controls，<video> 标签还有很多有用的属性：

• autoplay: 视频在就绪后立即自动播放（注意：很多现代浏览器为了用户体验，会禁止 autoplay，除非设置了 muted）。
• muted: 静音播放，常与 autoplay 一起使用，以解决自动播放被阻止的问题。
• loop: 视频播放结束后，重新开始播放。
• poster: 指定一张图片，在视频加载或播放前显示，这对于提升用户体验非常有用，可以避免显示视频的第一帧或加载中的黑屏。
• preload: 控制视频的预加载行为。
  • auto (默认): 浏览器应该尽快加载视频。
  • metadata: 浏览器应该只加载视频的元数据（如时长、尺寸）。
  • none: 浏览器不应加载视频。

示例：

<video 
  width="640" 
  height="360" 
  controls 
  autoplay 
  muted 
  loop 
  poster="my-video-poster.jpg"
  preload="metadata">
  <source src="my-video.mp4" type="video/mp4">
  您的浏览器不支持 HTML5 视频。
</video>

使用 JavaScript 控制视频

通过 JavaScript，你可以获得对视频播放的完全控制权，创建自定义的播放控件。

获取视频元素

const video = document.querySelector('video');

常用方法和属性

• 方法:
  • video.play(): 播放视频。
  • video.pause(): 暂停视频。
  • video.load(): 重新加载视频。
• 属性:
  • video.currentTime: 当前播放的时间（秒），可以设置来跳转到指定时间点。
  • video.duration: 视频的总时长（秒）。
  • video.volume: 音量（0.0 到 1.0）。
  • video.muted: 是否静音（布尔值）。
  • video.paused: 视频是否处于暂停状态（布尔值）。

事件监听

你可以监听视频的各种事件来执行特定操作。

• oncanplay: 当视频可以播放时触发。
• onplay: 当视频开始播放时触发。
• onpause: 当视频暂停时触发。
• onended: 当视频播放结束时触发。
• ontimeupdate: 当视频播放时间更新时触发（拖动进度条时）。

示例：自定义播放按钮

<video id="myVideo" width="640" height="360" controls>
  <source src="my-video.mp4" type="video/mp4">
</video>
<button id="playPauseBtn">播放</button>
<script>
  const video = document.getElementById('myVideo');
  const playPauseBtn = document.getElementById('playPauseBtn');
  playPauseBtn.addEventListener('click', () => {
    if (video.paused) {
      video.play();
      playPauseBtn.textContent = '暂停';
    } else {
      video.pause();
      playPauseBtn.textContent = '播放';
    }
  });
  video.addEventListener('ended', () => {
    playPauseBtn.textContent = '播放';
  });
</script>

视频素材获取途径

获取高质量的视频素材是开发的关键一步,以下是几个推荐的途径：

免费版权素材网站 (可免费商用)

这些网站提供高质量、无版权或知识共享许可的视频片段，非常适合个人项目和商业项目。

• Pexels Videos: https://www.pexels.com/videos/
  • 特点: 高质量、免费、可商用，无需署名，搜索非常方便，分类清晰。
• Pixabay Videos: https://pixabay.com/videos/
  • 特点: 和 Pexels 类似，提供大量免费的视频素材，同样可商用。
• Videvo: https://www.videvo.net/
  • 特点: 素材非常丰富，但需要注意每个视频的授权协议不同，有些需要署名，有些有使用限制，下载时务必仔细查看。
• Coverr: https://coverr.co/
  • 特点: 专门为网站背景视频设计，质量极高，所有视频均可免费商用，无需署名。
• Mixkit: https://mixkit.co/free-stock-video/
  • 特点: 提供视频、音乐、音效和视频模板，资源丰富，授权友好。

免费无版权素材 (需谨慎使用)

• YouTube 视频库: YouTube 官方提供了一些无版权的音乐和视频片段。
  • 地址: https://www.youtube.com/audiolibrary/music (音频) 和 https://studio.youtube.com/ -> "音频" -> "免版税音乐" 中可以找到一些视频素材。
  • 注意: 下载和使用时需要遵守 YouTube 的条款，并注意具体视频的许可。

付费素材网站 (专业高质量)

如果你需要更专业、更独特的素材，可以考虑付费网站。

• Artgrid: https://artgrid.io/
  • 特点: 订阅制，提供电影级的高质量视频素材。
• Storyblocks: https://www.storyblocks.com/
  • 特点: 订阅制，提供海量视频、图片和音频素材，下载次数不限。
• Envato Elements: https://elements.envato.com/
  • 特点: 订阅制，除了视频，还包括网站模板、音乐、图形设计等海量资源。

视频格式和编码建议

为了确保你的视频在所有现代浏览器上都能流畅播放,正确的格式至关重要。

最佳实践：

1. 首选 .mp4 (H.264) 格式，因为它拥有最好的兼容性。
2. 如果你的项目不关心 Safari 用户，或者想追求更小的文件体积，可以同时提供 .webm 格式。
3. 使用 <source> 标签将 .mp4 放在最前面，确保 Safari 等浏览器能优先加载它。

性能优化

• 压缩视频: 上传到网站前，务必使用工具（如 HandBrake, Adobe Media Encoder）对视频进行压缩，减小文件体积，加快加载速度。
• 使用视频托管服务: 对于大型项目，特别是需要 CDN 加速、防盗链、数据分析等功能时，强烈建议使用专业的视频托管服务，如 Vimeo (Plus/Pro 计划) 或 Wistia，它们能提供更好的播放体验和技术支持。
• 懒加载: 对于页面上的多个视频，可以使用 loading="lazy" 属性（目前浏览器支持度尚可）或 Intersection Observer API 实现懒加载，只有当视频进入视口时才开始加载，从而节省带宽。

希望这份详尽的指南能帮助你更好地使用 HTML5 视频功能！