javascript - PHP 视频流 Seekbar 在 Chrome 中不可用

Question

这与我的其他 PHP 视频流帖子有些相关，但这次的问题是视频的搜索栏在 Chrome 中不起作用。

我在 Stack Overflow 上找到了几篇关于此问题的不同帖子，但没有一个能够解决该问题。我会链接所有这些内容，但我似乎找不到昨天发现的相同帖子。

我将列出 PHP 代码的两个版本。我还应该指出在 PHP 加载视频数据之前我到底在做什么。在 HTML 页面上，我有一个 <video>标签没有 <source>标签。我使用 Javascript 对具有源标签的 PHP 文件进行 AJAX 调用。源标签本身不包含视频源文件的直接链接。相反，它们引用另一个加载数据的 PHP 文件。

视频的顶级 HTML。 super 简单。

<video id="showvideo" height="540" width="864" controls></video>

现在进行 AJAX 调用

function showVideo() {
        if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("showvideo").innerHTML = xmlhttp.responseText;
       }
    }
   xmlhttp.open("GET", "/firstphpfile.php", true);

    xmlhttp.send();

}

Javascript 函数在页面加载时加载。

这是firstphpfile.php的内容

<?php

echo "

<source src=\"http://example.com/video1.php?type=stuff.mp4\" type=\"video/mp4\">

<source src=\"http://example.com/video2.php?type=stuff.ogv\" type=\"video/ogg\">
";
?>

再说一次，没什么大不了的。现在我将发布几个不同版本的 video1.php 文件，它们实际上获取文件资源。

版本 1:

<?php

$file = video.mp4;



$filesize = filesize($file);

$offset = 0;
$length = $filesize;

if ( isset($_SERVER['HTTP_RANGE']) ) {
// if the HTTP_RANGE header is set we're dealing with partial content

$partialContent = true;

// find the requested range
// this might be too simplistic, apparently the client can request
// multiple ranges, which can become pretty complex, so ignore it for now
preg_match('/bytes=(\d+)-(\d+)?/', $_SERVER['HTTP_RANGE'], $matches);

$offset = intval($matches[1]);
$length = intval($matches[2]) - $offset;
} else {
$partialContent = false;
}

$file = fopen($file, 'r');

// seek to the requested offset, this is 0 if it's not a partial conten request
fseek($file, $offset);

$data = fread($file, $length);

fclose($file);

if ( $partialContent ) {
// output the right headers for partial content

header('HTTP/1.1 206 Partial Content');

header('Content-Range: bytes ' . $offset . '-' . ($offset + $length) . '/' . $filesize);
}

// output the regular HTTP headers
header("Content-Type:video/mp4");
header('Content-Length: $filesize');
header('Accept-Ranges: bytes');

// don't forget to send the data too
print($data);



?>

版本 2(我更喜欢这个版本，因为它在 Firefox 中的功能，但在 Chrome 中仍然没有骰子)

<?php

$file = video.mp4;


$mime = "video/mp4"; // The MIME type of the file, this should be replaced with your own.
$size = filesize($file); // The size of the file

// Send the content type header
header('Content-type: ' . $mime);

// Check if it's a HTTP range request
if(isset($_SERVER['HTTP_RANGE'])){
// Parse the range header to get the byte offset
$ranges = array_map(
    'intval', // Parse the parts into integer
    explode(
        '-', // The range separator
        substr($_SERVER['HTTP_RANGE'], 6) // Skip the `bytes=` part of the header
    )
);

// If the last range param is empty, it means the EOF (End of File)
if(!$ranges[1]){
    $ranges[1] = $size - 1;
}

// Send the appropriate headers
header('HTTP/1.1 206 Partial Content');
header('Accept-Ranges: bytes');
header('Content-Length: ' . ($ranges[1] - $ranges[0])); // The size of the range

// Send the ranges we offered
header(
    sprintf(
        'Content-Range: bytes %d-%d/%d', // The header format
        $ranges[0], // The start range
        $ranges[1], // The end range
        $size // Total size of the file
    )
);

// It's time to output the file
$f = fopen($file, 'rb'); // Open the file in binary mode
$chunkSize = 8192; // The size of each chunk to output

// Seek to the requested start range
fseek($f, $ranges[0]);

// Start outputting the data
while(true){
    // Check if we have outputted all the data requested
    if(ftell($f) >= $ranges[1]){
        break;
    }

    // Output the data
    echo fread($f, $chunkSize);

    // Flush the buffer immediately
    @ob_flush();
    flush();
    }
}
else {
// It's not a range request, output the file anyway
header('Content-Length: ' . $size);

// Read the file
@readfile($file);

// and flush the buffer
@ob_flush();
flush();
}


?>

因此，虽然两者都可以毫无问题地播放视频，但只有 Firefox 版本可以让我进行任何类型的搜索。第二个版本使得你只能向后查找，这是我更喜欢的。

我尝试过另一个版本，但在写这篇文章之前我已经删除了代码，并且没有再找到它。

我不确定我做错了什么，而且我发现没有解决方案可以解决允许 Chrome 版本的视频进行搜索的问题。

Answer 1

好的，我终于开始工作了。我决定不使用 javascript 加载 php 文件。

此外，我删除了 mime 类型变量，只正确设置了 header 。我发现使用 mime 类型变量会导致我的浏览器为内容类型 header 加载错误的 mime 类型，从而导致视频资源失败。