CakePHP3使用withFile与video标签实现视频流，Chrome播放时无法跳转页面求助

这个问题我之前也碰到过，核心原因有两个：一是Chrome对视频加载的分段请求处理逻辑，二是PHP默认的会话锁机制导致请求阻塞。咱们一步步来解决：

问题根源 #

1. PHP会话锁：PHP默认会在请求开始时锁定会话文件，直到请求完成才释放。如果你的视频流请求一直保持连接（比如没有支持分段加载），其他同会话的请求就会被卡住，必须等视频请求结束才能处理。
2. Chrome的Range请求：Chrome播放视频时会发送Range请求来分段加载视频内容，如果你的动作没有正确处理这个请求，服务器会返回完整的视频文件，同时Chrome会保持连接来等待后续数据，进一步加剧了阻塞问题。而Edge的加载逻辑可能更宽松，不会出现这个情况。

解决方案 #

方案1：启用CakePHP内置的Range支持（CakePHP 3.4+） #

如果你的CakePHP版本是3.4及以上，withFile方法已经支持range选项，同时记得提前释放会话锁：

public function stream($id) {
    $filePath = WWW_ROOT . 'Component.webm';
    
    // 立即释放会话锁，允许其他请求并行处理
    session_write_close();
    
    // 启用Range支持，让服务器处理分段请求
    $response = $this->response->withFile($filePath, [
        'download' => false,
        'range' => true,
        'type' => 'video/webm' // 确保MIME类型正确
    ]);
    
    return $response;
}

方案2：手动处理Range请求（兼容旧版本CakePHP） #

如果你的CakePHP版本较低，不支持range选项，可以手动实现Range请求的处理逻辑：

public function stream($id) {
    $filePath = WWW_ROOT . 'Component.webm';
    $fileSize = filesize($filePath);
    
    // 释放会话锁，避免阻塞其他请求
    session_write_close();
    
    $fp = fopen($filePath, 'rb');
    if (!$fp) {
        return $this->response->withStatus(404);
    }
    
    $rangeHeader = $this->request->getHeaderLine('Range');
    $response = $this->response->withType('video/webm');
    
    if ($rangeHeader) {
        // 解析Range请求头
        list($param, $range) = explode('=', $rangeHeader);
        if (strtolower(trim($param)) !== 'bytes') {
            fclose($fp);
            return $response->withStatus(400); // Bad Request
        }
        
        list($start, $end) = explode('-', $range);
        $start = (int)$start;
        $end = $end ? (int)$end : $fileSize - 1;
        
        // 校验Range是否合法
        if ($start > $end || $start >= $fileSize || $end >= $fileSize) {
            fclose($fp);
            return $response
                ->withStatus(416) // Range Not Satisfiable
                ->withHeader('Content-Range', sprintf('bytes */%d', $fileSize));
        }
        
        $length = $end - $start + 1;
        fseek($fp, $start);
        
        $response = $response
            ->withStatus(206) // Partial Content
            ->withHeader('Content-Range', sprintf('bytes %d-%d/%d', $start, $end, $fileSize))
            ->withHeader('Content-Length', (string)$length)
            ->withHeader('Accept-Ranges', 'bytes');
    } else {
        // 处理完整视频请求
        $response = $response
            ->withStatus(200)
            ->withHeader('Content-Length', (string)$fileSize)
            ->withHeader('Accept-Ranges', 'bytes');
    }
    
    // 输出视频内容
    $response = $response->withBody(new \Cake\Http\CallbackStream(function() use ($fp) {
        fpassthru($fp);
        fclose($fp);
    }));
    
    return $response;
}

额外注意事项 #

• 确保视频文件的webm格式是Chrome支持的编码（比如VP8/VP9视频编码和Vorbis/Opus音频编码），格式不兼容也可能导致播放异常。
• 可以在模板里明确指定视频类型，避免浏览器猜测：

<video class="img-responsive" controls>
    <source src="<?= Router::url(['controller' => 'posts', 'action' => 'stream', $id]) ?>" type="video/webm">
</video>

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