html5 audio video currentTime失效不起作用无法拖动进度条解决方法

php · 发表于 2015/1/1 15:59

html5 audio video不需要插件即可播放音频和视频，currentTime可以用来设置播放的起始时间，使得可以不从文件开头开始播放。如果 html5 audio video设置currentTime失效，无法设置开始播放的时间点，audio/video不能拖动进度条调整播放进度，很有可能是使用了php asp jsp等服务器后端语言动态输出待播放的媒体文件内容，如果audio/video播放的媒体资源文件不是静态文件，不经过处理直接通过服务器语言动态输出流媒体内容，设置currentTime不会生效。

为什么直接使用静态的.mp3 .mp4 .flac等媒体文件时支持使用 audio | video .currentTime = NUMBERIC; （NUMBERIC是一个数字，可以是整数，也可以是浮点数）来设置播放起始位置呢，而动态输出流媒体文件内容时不行呢？

这其中的核心技术就是服务器端对断点续传的支持，断点续传允许客户端从服务器提取某个文件指定字节范围内的一部分内容，当下载中断以后再次下载时可以只请求下载原先没有下载的部分，避免重复传输现有内容。当客户端（浏览器）检测到服务器支持断点续传以后才会发送相应的区间内容请求给服务器，服务器接到请求以后再返回相应范围内的文件内容，这样才能实现流媒体文件的定点播放。而直接使用静态文件做播放资源时，服务器软件通常会自动处理断点续传请求。

实现动态流媒体文件支持通过HTML5 audio/video.currentTime设置播放起始时间点，可以使用以下两种方法。

方法一：使用服务器模块X-SendFile输出流媒体文件内容来解决currentTime失效的问题，以Apache服务器为例。
首先下载mod_xsendfile，将模块文件复制到Apache的modules目录，在Apache配置文件中添加

LoadModule xsendfile_module modules/mod_xsendfile.so
XSendFile On
XSendFilePath D:/server

复制代码

其中XSendFilePath意思是将指定的文件夹路径添加到白名单中，指定文件夹中的文件可以被Apache直接发送给客户端，除了设置的文件夹本身以外，该文件夹包含的各级子目录也在允许范围内。配置完服务器以后重启Apache服务器以后X-SendFile模块有效。

安装了X-SendFile模块以后，PHP输出媒体文件变得非常简单。其中的Content-Type是要输出文件的MIME类型，可以不必写死而通过服务器语言获取。可以参见方法二有实例代码。

<?php
header('Content-Type: audio/mp3');
header('X-Sendfile: D:\server\wuxiancheng.cn\Audio\S.H.E\612xq.mp3');
?>

复制代码

方法二：使用服务器语言模拟断点续传支持让HTML5 audio/video.currentTime生效，以PHP为例。

如果没有服务器配置权限，可以在动态语言中发送Accept-Ranges: bytes和Content-Range: bytes S-E/FILESIZE两个响应头，告诉客户端它请求的服务器资源支持断点续传，服务器端接收到客户端发送的请求以后，从请求头拿到需要发送的内容区间，然后从文件中读取指定起止位置的数据发送到客户端即可解决HTML5 audio/video使用后端语言动态输出媒体文件内容造成的currentTime失效以及无法手动拖动进度条的问题。其中S和E分别是当次请求的起始位置索引和结束位置索引，FILESIZE为代表文件尺寸的总字节数。

以下为演示代码，不使用X-SendFile而使用PHP模拟实现断点续传发送文件内容。直接复制代码可能出错，如有需要，可以下载附件使用。

<?php
/**
... @author 吴先成 ...
... @ wuxiancheng.cn 51-n.com ...
PHP模拟断点续传输出文件内容解决动态语言输出的流媒体文件无法在HTML5 audio/video中通过设置currentTime或拖动进度条定点播放的问题
如果操作系统是Windows且PHP版本低于7.1，PHP脚本使用UTF-8编码时，内容文件的路径或文件名包含中文等非ASCII字符时，需要转码为GB2312或GBK，否则会出现文件不存在的错误。
*/
$fPath = 'D:\server\wuxiancheng.cn\Audio\S.H.E\612xq.mp3';
if(is_file($fPath) && is_readable($fPath)){
if($fHandle = fopen($fPath, 'rb')){
if($fileInfo = fstat($fHandle)){
$fParts = preg_split('%[/\\\\]+%', $fPath);
$filename = array_pop($fParts);
$filename = str_replace(',', '', $filename);
$filesize = $fileInfo['size'];
if($filesize === 0){
header('Content-Type: application/force-download');
header('Content-Disposition: attachment;filename="' . $filename . '"');
exit;
}
$maximumPosition = $filesize-1;
$startPosition = 0;
$endPosition = $maximumPosition;
$contentLength = $filesize;
if(
isSet($_SERVER['HTTP_RANGE']) &&
preg_match('%bytes\s*=\s*(\d+)\s*\-\s*(\d+)?%i', $_SERVER['HTTP_RANGE'], $match)
){
$startPosition = (int)$match[1];
$endPosition = isSet($match[2]) ? (int)$match[2] : $maximumPosition;
$endPosition = min($endPosition, $maximumPosition);
if($startPosition > $endPosition){
header('HTTP/1.1 416 Range Not Satisfiable');
exit;
}
$contentLength = $endPosition - $startPosition + 1;
}
if(fseek($fHandle, $startPosition) === 0){
if($contentLength === $filesize){
header('HTTP/1.1 200 OK');
}else{
header('HTTP/1.1 206 Partial Content');
header("Content-Range: bytes {$startPosition}-{$endPosition}/{$filesize}");
}
$finfo = new finfo(FILEINFO_MIME_TYPE);
$type = $finfo->file($fPath);
header('Content-Type: ' . $type);
header('Content-Length: ' . $contentLength);
header('Accept-Ranges: bytes');
header('Content-Disposition: inline; filename="' . $filename . '"');
while(!feof($fHandle)){
$currentPosition = ftell($fHandle);
$bytesLeft = $endPosition-$currentPosition+1;
if($bytesLeft < 1){
break;
}
$bytesToReadEachTime = 1024 * 128;
$bytesToRead = $bytesLeft>$bytesToReadEachTime?$bytesToReadEachTime:$bytesLeft;
if($blockContent = fread($fHandle, $bytesToRead)){
echo $blockContent;
flush();
}
}
}
}
fclose($fHandle);
}
}

复制代码

MulhollandDr · 发表于 2022/2/12 21:50

代码可以用。谢谢分享

账号		自动登录	找回密码
密码			新建账号

[HTML] html5 audio video currentTime失效不起作用无法拖动进度条解决方法

评分

相关帖子