PHP 流式 webm 无法在 Safari 上运行

Question

问题

我正在尝试通过 PHP 在 Safari 上制作 .webm 流。由于某种原因，我在 Safari 中看到一个空的视频播放器。在其他浏览器上运行良好。

有 Safari 发出的所有请求及其请求和响应标头的屏幕截图：

1. 
2. 
3. 

我已经尝试过的

从我迄今为止所做的研究中，我知道当服务器不支持 Range 标头时 Safari 会出现问题。

我已经通过运行

curl --range 0-99 http://localhost/video/play.php -o /dev/null

测试了我的案例，结果显示我的服务器支持自定义范围。

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   100  100   100    0     0   2889      0 --:--:-- --:--:-- --:--:--  3571

参考：[iOS 上资源加载失败，插件处理加载](iOS 资源加载失败，插件处理加载

测试结果

1. localhost/video/play.php (with webm file)

   - 仅适用于 Chrome

2. localhost/video/play.php (with mp4 file)

   - 适用于 Chrome 和 Safari

3. localhost/video/test.mp4

   - 适用于 Chrome 和 Safari

4. localhost/video/test.webm

   - 适用于 Chrome 和 Safari

目录结构

video
├── play.php (index file, passes the video file to the VideoStream.php)
├── VideoStream.php (The class for php streaming)
├── test.mp4
└── test.webm

文件

Play.php

<?php

include "VideoStream.php";

// $filePath = './test.mp4';
$filePath = './test.webm';

$stream = new VideoStream($filePath);
$stream->start();

VideoStream.php

<?php

/**
 * Description of VideoStream
 *
 * @author Rana
 * @link http://codesamplez.com/programming/php-html5-video-streaming-tutorial
 */

class VideoStream
{
    private $path = "";
    private $extension = "";
    private $stream = "";
    private $buffer = 102400;
    private $start  = -1;
    private $end    = -1;
    private $size   = 0;

    function __construct($filePath)
    {
        $this->path = $filePath;
        $this->extension = pathinfo($filePath)['extension'];
    }

    /**
     * Open stream
     */
    private function open()
    {
        if (!($this->stream = fopen($this->path, 'rb'))) {
            die('Could not open stream for reading');
        }
    }

    /**
     * Set proper header to serve the video content
     */
    private function setHeader()
    {
        ob_get_clean();

        $this->start = 0;
        $this->size  = filesize($this->path);
        $this->end   = $this->size - 1;

        header("Content-Type: video/" . $this->extension);
        header("Cache-Control: max-age=2592000, public");
        header("Expires: " . gmdate('D, d M Y H:i:s', time() + 2592000) . ' GMT');
        header("Last-Modified: " . gmdate('D, d M Y H:i:s', @filemtime($this->path)) . ' GMT');
        header("Accept-Ranges: 0-" . $this->end);

        if (isset($_SERVER['HTTP_RANGE'])) {

            $c_start = $this->start;
            $c_end = $this->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 $this->start-$this->end/$this->size");
                exit;
            }
            if ($range == '-') {
                $c_start = $this->size - substr($range, 1);
            } else {
                $range = explode('-', $range);
                $c_start = $range[0];

                $c_end = (isset($range[1]) && is_numeric($range[1])) ? $range[1] : $c_end;
            }
            $c_end = ($c_end > $this->end) ? $this->end : $c_end;
            if ($c_start > $c_end || $c_start > $this->size - 1 || $c_end >= $this->size) {
                header('HTTP/1.1 416 Requested Range Not Satisfiable');
                header("Content-Range: bytes $this->start-$this->end/$this->size");
                exit;
            }
            $this->start = $c_start;
            $this->end = $c_end;
            $length = $this->end - $this->start + 1;
            fseek($this->stream, $this->start);
            header('HTTP/1.1 206 Partial Content');
            header("Content-Length: " . $length);
            header("Content-Range: bytes $this->start-$this->end/" . $this->size);
        } else {
            header("Content-Length: " . $this->size);
        }
    }

    /**
     * close curretly opened stream
     */
    private function end()
    {
        fclose($this->stream);
        exit;
    }

    /**
     * perform the streaming of calculated range
     */
    private function stream()
    {
        $i = $this->start;
        set_time_limit(0);
        while (!feof($this->stream) && $i <= $this->end) {
            $bytesToRead = $this->buffer;
            if (($i + $bytesToRead) > $this->end) {
                $bytesToRead = $this->end - $i + 1;
            }
            $data = fread($this->stream, $bytesToRead);
            echo $data;
            flush();
            $i += $bytesToRead;
        }
    }

    /**
     * Start streaming video content
     */
    function start()
    {
        $this->open();
        $this->setHeader();
        $this->stream();
        $this->end();
    }
}

NGINX

我确实使用 NGINX，不确定这是否会引起问题，但以防万一我将配置保留在

/video/

位置：

location /video/ {
    alias /var/www/video/;
    index index.html;

    error_page 404 /usr/share/nginx/html/index.html;

    location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass video:9000;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $request_filename;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }

    try_files $uri $uri/ /index.php$is_args$args /index.php =404;

    autoindex on;
}

编辑：仍在寻找解决方案。

Answer 1

我发现 Safari 仅当 URI 路径以

.webm

结尾时才支持 webm 文件（查询参数不算） - 至少在 macOS Ventura 上