如何在HTML5应用中嵌入视频？OneDrive及MySQL相关技术问题咨询

我来帮你梳理这几个问题的解决方案，都是实际开发中常用的思路，应该能帮到你～

一、修复OneDrive嵌入HTML5 Video的错误 #

OneDrive默认的分享链接不能直接塞进video标签里，因为那是网页链接，不是视频文件的直接访问地址。你需要做这几步：

1. 设置正确的分享权限：在OneDrive里找到你的视频，右键选择「分享」，把权限改成「任何人都可以查看」（不然手机端访问会跳转到登录页面）。
2. 转换分享链接为直接下载地址：
   • 复制OneDrive的分享链接，比如是这种格式：https://onedrive.live.com/embed?cid=XXX&resid=XXX&authkey=XXX&em=2
   • 把链接里的embed替换成download，就得到了直接可访问的视频链接：https://onedrive.live.com/download?cid=XXX&resid=XXX&authkey=XXX
3. 用HTML5 Video标签嵌入：确保视频格式是MP4（H.264编码），这是所有智能手机都支持的格式。示例代码：

<video controls width="600">
  <source src="替换成你的转换后的OneDrive链接" type="video/mp4">
  你的浏览器不支持视频播放
</video>

二、跨平台复用视频的通用方案 #

要让视频在手机、电脑等所有设备都能访问，核心是要有一个公开的HTTP/HTTPS视频链接，而不是本地路径。这里有几个靠谱的方案：

• 云存储服务：除了OneDrive，还可以用类似的云存储服务，只要能生成公开的直接下载链接就行，步骤和OneDrive类似：设置权限+转换链接。
• 自建静态文件服务器：如果有自己的服务器，可以把视频放在服务器的静态文件目录里，直接用服务器域名+文件路径作为链接，比如https://your-domain.com/videos/my-video.mp4。
• 多分辨率适配：为了让手机加载更快，可以准备不同分辨率的视频（比如1080p、720p、480p），用多个<source>标签让浏览器自动选择最合适的版本：

<video controls width="600">
  <source src="https://your-cdn.com/video-1080p.mp4" type="video/mp4">
  <source src="https://your-cdn.com/video-720p.mp4" type="video/mp4">
  <source src="https://your-cdn.com/video-480p.webm" type="video/webm">
  你的浏览器不支持视频播放
</video>

三、MySQL存储视频的正确方式 #

直接把视频文件存在MySQL里不是最优解（大文件会拖慢数据库），推荐两种方案：

方案1：存储视频元数据（强烈推荐） #

只在数据库里存视频的访问链接、文件名、大小等信息，视频本身存在云存储或服务器文件系统里。

1. 创建数据库表：

CREATE TABLE videos (
  id INT AUTO_INCREMENT PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  file_url VARCHAR(500) NOT NULL, -- 视频的公开访问链接
  file_size BIGINT NOT NULL, -- 视频大小（字节）
  file_type VARCHAR(50) NOT NULL, -- 比如video/mp4
  upload_time DATETIME DEFAULT CURRENT_TIMESTAMP
);

2. 插入数据：

INSERT INTO videos (title, file_url, file_size, file_type)
VALUES ('我的旅行视频', 'https://your-cdn.com/trip.mp4', 12345678, 'video/mp4');

3. 在HTML中使用：从数据库取出file_url，直接放到video标签的src里就行，和前面的嵌入方式一样。

方案2：直接存储视频文件（仅适合小视频） #

如果一定要把视频存在MySQL里，可以用LONGBLOB类型（支持最大4GB的文件），但注意会影响数据库性能。

1. 创建表：

CREATE TABLE videos (
  id INT AUTO_INCREMENT PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  video_data LONGBLOB NOT NULL, -- 存储视频二进制数据
  file_type VARCHAR(50) NOT NULL,
  upload_time DATETIME DEFAULT CURRENT_TIMESTAMP
);

2. 上传视频（以PHP为例）：

// 处理上传的视频文件
$videoContent = file_get_contents($_FILES['video']['tmp_name']);
$pdo = new PDO('mysql:host=localhost;dbname=your_db', 'username', 'password');
$stmt = $pdo->prepare("INSERT INTO videos (title, video_data, file_type) VALUES (?, ?, ?)");
$stmt->execute([$_POST['title'], $videoContent, $_FILES['video']['type']]);

3. 取出视频并播放：写一个后端接口（比如get_video.php）返回视频数据：

$pdo = new PDO('mysql:host=localhost;dbname=your_db', 'username', 'password');
$stmt = $pdo->prepare("SELECT video_data, file_type FROM videos WHERE id = ?");
$stmt->execute([$_GET['id']]);
$video = $stmt->fetch(PDO::FETCH_ASSOC);
// 设置响应头
header("Content-Type: " . $video['file_type']);
echo $video['video_data'];

然后HTML里这样用：

<video controls width="600">
  <source src="get_video.php?id=1" type="video/mp4">
  你的浏览器不支持视频播放
</video>

内容的提问来源于stack exchange，提问作者Gregor