PHP自定义视频控件开发教程

播放

00:00 / 00:00

 'uploads/demo.mp4'
];
if (!isset($videos[$id])) {
http_response_code(404);
die('视频不存在');
}
$file = $videos[$id];
if (!file_exists($file)) {
http_response_code(404);
die('文件未找到');
}
// 可加入用户登录检查
// if (!is_user_logged_in()) { die('无权访问'); }
$fp = @fopen($file, 'rb');
$size = filesize($file);
$length = $size;
$start = 0;
$end = $size - 1;
header("Content-Type: video/mp4");
header("Accept-Ranges: bytes");
if (isset($_SERVER['HTTP_RANGE'])) {
$c_start = $start;
$c_end = $end;
list(, $range) = explode('=', $_SERVER['HTTP_RANGE'], 2);
if (strpos($range, ',') !== false) {
header('HTTP/1.1 416 Requested Range Not Satisfiable');
header("Content-Range: bytes $start-$end/$size");
die();
}
$range = explode('-', $range);
$c_start = (int)($range[0]);
$c_end = (isset($range[1]) && is_numeric($range[1])) ? (int)($range[1]) : $end;
$length = $c_end - $c_start + 1;
fseek($fp, $c_start);
header('HTTP/1.1 206 Partial Content');
}
header("Content-Length: " . $length);
header("Content-Range: bytes $c_start-$c_end/$size");
while(!feof($fp) && ($p = ftell($fp)) <= $c_end) {
$buffer = fread($fp, min(1024 * 1024, $c_end - $p + 1));
echo $buffer;
flush();
}
fclose($fp);
exit();
?>

const video = document.getElementById('myVideo');
const playPauseBtn = document.getElementById('playPause');
const progress = document.getElementById('progress');
const timeDisplay = document.getElementById('timeDisplay');
// 更新时间显示
function updateTimer() {
const cur = formatTime(video.currentTime);
const dur = formatTime(video.duration);
timeDisplay.textContent = ${cur} / ${dur};
}
function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return ${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')};
}
// 播放/暂停切换
playPauseBtn.addEventListener('click', () => {
if (video.paused) {
video.play();
playPauseBtn.textContent = '暂停';
} else {
video.pause();
playPauseBtn.textContent = '播放';
}
});
// 进度条同步
video.addEventListener('timeupdate', () => {
const percent = (video.currentTime / video.duration) * 100;
progress.value = percent;
updateTimer();
});
// 点击进度条跳转
progress.addEventListener('input', () => {
const newTime = (progress.value / 100) * video.duration;
video.currentTime = new7ime;
});