在网站开发中，视频资源的加载如果采用同步方式，会导致页面其他内容等待视频加载完成后才渲染，严重影响用户体验。PHP可以通过异步接口输出视频流的方式，配合前端异步请求实现视频的高效加载和播放。
异步加载视频的核心逻辑
异步加载视频的核心思路是：前端先渲染页面基础内容，在需要播放视频时通过异步请求调用PHP接口，PHP接口读取视频文件并以流的形式输出，前端拿到视频流后直接绑定到video标签进行播放，整个过程不会阻塞页面的其他内容加载。
后端PHP接口实现
PHP端需要实现视频文件的读取、断点续传支持以及正确的响应头设置，保证视频可以正常加载和播放。以下是完整的PHP接口代码示例：
<?php
// 视频文件路径，根据实际项目调整
$videoPath = './videos/test.mp4';
// 检查文件是否存在
if (!file_exists($videoPath)) {
header("HTTP/1.1 404 Not Found");
exit('视频资源不存在');
}
// 获取文件大小和类型
$fileSize = filesize($videoPath);
$fileMime = mime_content_type($videoPath);
// 处理断点续传
$range = isset($_SERVER['HTTP_RANGE']) ? $_SERVER['HTTP_RANGE'] : null;
if ($range) {
// 解析range参数，格式如 bytes=0-1023
preg_match('/bytes=(d+)-(d*)/', $range, $matches);
$start = intval($matches[1]);
$end = !empty($matches[2]) ? intval($matches[2]) : $fileSize - 1;
$length = $end - $start + 1;
// 设置断点续传响应头
header('HTTP/1.1 206 Partial Content');
header("Content-Range: bytes $start-$end/$fileSize");
header("Content-Length: $length");
} else {
$start = 0;
$end = $fileSize - 1;
$length = $fileSize;
header("Content-Length: $fileSize");
}
// 设置通用响应头
header("Content-Type: $fileMime");
header("Accept-Ranges: bytes");
header("Content-Disposition: inline; filename=" . basename($videoPath));
// 打开文件并输出内容
$fp = fopen($videoPath, 'rb');
fseek($fp, $start);
$bufferSize = 8192;
$bytesSent = 0;
while (!feof($fp) && $bytesSent < $length) {
$buffer = fread($fp, $bufferSize);
echo $buffer;
$bytesSent += strlen($buffer);
flush();
}
fclose($fp);
exit;
?>
前端异步请求实现
前端通过fetch或者XMLHttpRequest异步调用PHP接口，获取视频流后绑定到video标签即可实现播放，以下是前端代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>异步加载视频示例</title>
</head>
<body>
<button id="loadVideoBtn">点击加载视频</button>
<div id="videoContainer" style="margin-top: 20px;"></div>
<script>
document.getElementById('loadVideoBtn').addEventListener('click', function() {
// 创建video标签
const video = document.createElement('video');
video.controls = true;
video.width = 800;
video.height = 450;
// 设置视频源为PHP异步接口地址
video.src = '/api/video.php';
// 将video标签插入容器
document.getElementById('videoContainer').appendChild(video);
// 自动播放
video.play().catch(err => {
console.log('自动播放失败，需要用户手动点击播放');
});
});
</script>
</body>
</html>
注意事项
- 视频文件路径需要根据实际项目部署情况调整，确保PHP进程有读取该文件的权限
- 如果视频文件较大，建议开启服务器的gzip压缩优化传输效率，但不要对视频流本身进行压缩，避免播放异常
- 生产环境中可以添加接口鉴权逻辑，避免视频资源被非法盗用
- 前端如果需要支持多个视频切换，只需要修改video标签的src属性为对应的PHP接口地址即可，无需重新加载页面
常见问题排查
如果视频无法正常播放，可以先检查PHP接口返回的响应头是否正确，特别是Content-Type和Accept-Ranges字段。如果播放过程中出现卡顿，可以检查服务器的带宽是否充足，或者调整PHP接口的输出缓冲区大小。