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
安装了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);
- }
- }
|
评分
-
查看全部评分
|
