Lfangq Site

外观

视频播放相关的问题

约 2106 字大约 7 分钟

2025-06-04

1. HTML 视频（Video）

在 HTML 中播放视频的方法有很多种。

1.1 <embed> 标签

<embed> 标签用于在 HTML 文档中嵌入外部内容，包括视频。

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

问题:

  • ❌ HTML4 无法识别 <embed> 标签。您的页面无法通过验证。
  • ❌ 如果浏览器不支持 Flash，那么视频将无法播放
  • ❌ iPad 和 iPhone 不能显示 Flash 视频。
  • ❌ 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。
  • ⚠️ 已过时: <embed> 标签在现代 Web 开发中已不推荐使用

1.2 <object> 标签

<object> 标签用于在 HTML 文档中嵌入外部对象，包括视频。

<object data="video.mp4" type="video/mp4">
  <embed src="video.mp4" type="video/mp4" />
</object>

问题:

  • ❌ 如果浏览器不支持 Flash，将无法播放视频
  • ❌ iPad 和 iPhone 不能显示 Flash 视频
  • ❌ 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放
  • ⚠️ 已过时: 由于 Flash 的安全性问题，现在已经不推荐使用 Flash，而是使用 HTML5 的 <video> 标签

1.3 <video> 标签

<video> 标签用于在 HTML 文档中嵌入视频。

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

优点:

  • ✅ 最好的 HTML 解决方法
  • ✅ 现代主流浏览器都支持
  • ✅ 原生支持多种视频格式
  • ✅ 提供丰富的 API 和控制选项

完整示例:

<video width="640" height="360" controls poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <source src="video.ogv" type="video/ogg" />
  您的浏览器不支持 video 标签。
</video>

常用属性:

属性说明
src视频文件路径
controls显示播放控件
autoplay页面加载后自动播放
loop循环播放
muted静音播放
poster视频加载前显示的封面图
width/height视频播放器尺寸
playsinline在移动设备上内联播放

JavaScript 控制:

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

// 播放
video.play();

// 暂停
video.pause();

// 设置播放时间
video.currentTime = 30; // 跳转到30秒

// 设置音量
video.volume = 0.5; // 50%音量

// 全屏
video.requestFullscreen();

// 事件监听
video.addEventListener("play", () => console.log("开始播放"));
video.addEventListener("pause", () => console.log("已暂停"));
video.addEventListener("ended", () => console.log("播放结束"));
video.addEventListener("error", (e) => console.error("播放错误", e));

2. 通过流媒体播放视频的方式

2.1 HLS (HTTP Live Streaming)

Apple 开发的基于 HTTP 的自适应比特率流通信协议。

特点:

  • ✅ 支持自适应码率切换
  • ✅ 低延迟
  • ✅ 支持 DRM 数字版权保护
  • ✅ 广泛支持于 iOS 和现代浏览器

使用方式:

<video controls>
  <source src="playlist.m3u8" type="application/x-mpegURL" />
</video>

适用场景:

  • 直播流
  • 点播视频
  • 移动端视频播放

2.2 DASH (Dynamic Adaptive Streaming over HTTP)

MPEG 组织推出的基于 HTTP 的自适应比特率流通信协议。

特点:

  • ✅ 开源标准（MPEG-DASH）
  • ✅ 自适应码率切换
  • ✅ 支持多种编解码器
  • ✅ 跨平台支持

使用方式:

<video controls>
  <source src="manifest.mpd" type="application/dash+xml" />
</video>

适用场景:

  • 网络条件变化较大的场景
  • 需要跨平台支持的视频应用

2.3 HLS vs DASH 对比

特性HLSDASH
开发者AppleMPEG
标准专有开源标准
支持iOS/现代浏览器所有现代浏览器
格式.m3u8.mpd
延迟较低低
DRM支持支持

2.4 其他流媒体协议

  • RTMP (Real-Time Messaging Protocol): 低延迟直播协议，但需要 Flash 支持，已逐渐被淘汰
  • WebRTC: 超低延迟（<200ms），适用于实时互动场景
  • HLS + Low-Latency: HLS 的低延迟版本，延迟可控制在 3-5 秒

3. 直接通过访问服务器文件播放视频的方式

3.1 直接访问服务器文件

最简单的方式，直接通过 HTTP URL 访问服务器上的视频文件。

<video src="https://example.com/videos/movie.mp4" controls></video>

优点:

  • ✅ 简单直接，无需额外配置
  • ✅ 浏览器原生支持
  • ✅ 适合小文件和低并发场景

缺点:

  • ❌ 不支持断点续传（需要服务器配置）
  • ❌ 大文件加载慢
  • ❌ 无法自适应码率
  • ❌ 服务器带宽压力大

3.2 通过 Nginx 代理服务器文件

使用 Nginx 作为反向代理服务器，提供视频文件服务。

配置示例:

server {
    listen 80;
    server_name example.com;

    location /videos/ {
        alias /path/to/videos/;

        # 支持断点续传
        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;

        # 优化大文件传输
        sendfile_max_chunk 1m;

        # 缓存配置
        expires 30d;
        add_header Cache-Control "public, immutable";

        # CORS 支持
        add_header Access-Control-Allow-Origin *;
    }
}

优点:

  • ✅ 支持断点续传
  • ✅ 性能优化（sendfile、tcp_nopush）
  • ✅ 可配置缓存策略
  • ✅ 支持 CORS 跨域
  • ✅ 负载均衡和高可用

适用场景:

  • 中小型视频网站
  • 企业内部视频系统
  • 文件服务器

3.3 通过 CDN 加速

使用 CDN（内容分发网络）分发视频文件。

优点:

  • ✅ 全球加速，降低延迟
  • ✅ 减轻源站压力
  • ✅ 高可用性和稳定性
  • ✅ 自动缓存和负载均衡

常用 CDN 服务:

  • 阿里云 CDN
  • 腾讯云 CDN
  • 七牛云
  • Cloudflare
  • Akamai

3.4 方案对比

方案性能复杂度成本适用场景
直接访问⭐⭐⭐低小型项目
Nginx 代理⭐⭐⭐⭐⭐⭐中中型项目
CDN 加速⭐⭐⭐⭐⭐⭐⭐⭐高大型项目

3.5 最佳实践

  1. 视频格式优化:

    • 提供多种格式（mp4、webm、ogv）确保兼容性
    • 使用 H.264 编码，兼容性最好
    • 合理设置码率和分辨率

  2. 性能优化:

    • 启用 Gzip 压缩（对元数据有效）
    • 使用 CDN 分发
    • 配置浏览器缓存
    • 启用 HTTP/2

  3. 用户体验:

    • 提供清晰的错误提示
    • 支持断点续传
    • 添加加载动画
    • 提供清晰度切换

4. 为什么视频网站的视频链接地址是 blob？

4.1 什么是 Blob URL？

Blob URL（也称为 Object URL）是浏览器为 Blob 对象生成的特殊 URL，格式为：

blob:https://example.com/uuid-string

4.2 Blob URL 的特点

  • ✅ 本地生成，无需服务器请求
  • ✅ 临时性，页面关闭后自动失效
  • ✅ 可以直接用于 <video>、<audio>、<img> 等标签
  • ✅ 性能好，避免了网络请求

4.3 生成 Blob URL

// 从二进制数据创建 Blob
const blob = new Blob([videoData], { type: "video/mp4" });

// 生成 Blob URL
const blobUrl = URL.createObjectURL(blob);

// 使用
video.src = blobUrl;

// 使用完毕后释放
URL.revokeObjectURL(blobUrl);

4.4 视频网站使用 Blob URL 的原因

  1. 安全性:

    • 隐藏真实的视频文件路径
    • 防止直接下载
    • 可以配合 DRM 进行版权保护

  2. 性能优化:

    • 视频数据通过 WebSocket 或 Fetch API 分段获取
    • 可以实现边下边播
    • 支持断点续传和视频拼接

  3. 灵活控制:

    • 可以在播放前对视频数据进行处理
    • 支持自定义视频源
    • 可以实现视频加密和解密

4.5 实际应用场景

// 1. 从 Fetch API 获取视频数据
async function loadVideo() {
  const response = await fetch("/api/video/segment");
  const blob = await response.blob();
  const blobUrl = URL.createObjectURL(blob);
  video.src = blobUrl;
}

// 2. 从 WebSocket 获取视频流
const socket = new WebSocket("wss://example.com/video-stream");
socket.onmessage = (event) => {
  const blob = new Blob([event.data], { type: "video/mp4" });
  const blobUrl = URL.createObjectURL(blob);
  video.src = blobUrl;
};

// 3. 视频拼接（分段加载）
const segments = [];
segments.push(segment1Blob);
segments.push(segment2Blob);
const finalBlob = new Blob(segments, { type: "video/mp4" });
video.src = URL.createObjectURL(finalBlob);

4.6 安全注意事项

  • ⚠️ 使用完毕后必须调用 URL.revokeObjectURL() 释放内存
  • ⚠️ Blob URL 只在当前页面生命周期内有效
  • ⚠️ 不要将 Blob URL 暴露给不可信的第三方

4.7 参考资料

5. 总结

5.1 视频播放方案选择指南

场景推荐方案说明
简单嵌入<video> 标签最简单直接
大型视频网站HLS/DASH + CDN自适应码率，全球加速
直播HLS + 低延迟兼顾兼容性和延迟
实时互动WebRTC超低延迟，<200ms
内部系统Nginx 代理性价比高
需要加密Blob URL + DRM安全性高

5.2 最佳实践

  1. 兼容性: 提供多种视频格式（mp4、webm、ogv）
  2. 性能: 使用 CDN 加速，配置缓存策略
  3. 用户体验: 支持断点续传，提供清晰度切换
  4. 安全性: 使用 HTTPS，考虑 DRM 保护
  5. 监控: 添加播放错误监控和日志

5.3 常见问题

Q: 视频在 Safari 中无法播放？ A: Safari 只支持 H.264 编码的 MP4，确保视频编码正确

Q: 如何实现视频断点续播？ A: 使用 localStorage 记录播放进度，页面加载时恢复

Q: 视频加载太慢怎么办？ A: 使用 CDN、开启缓存、提供多个清晰度选项

Q: 如何防止视频被下载？ A: 使用 Blob URL、DRM 保护、加密传输

Copyright©2018-present Lfangq