Html 在完全加载.ogg视频之前,有没有办法告诉它文件大小?

Html 在完全加载.ogg视频之前,有没有办法告诉它文件大小?,html,html5-video,mp4,filesize,ogg,Html,Html5 Video,Mp4,Filesize,Ogg,我知道ogg视频和mp4视频之间的一个区别是ogg视频没有描述文件大小的元数据,因此当加载ogg视频时,控件无法显示文件完全加载之前的剩余时间。如果ogg视频长度超过几分钟,这可能是一个问题。有没有办法在请求页面时获取此文件大小 (客户端开发人员,提出一个我认为有服务器端答案的问题。如果你能想出一种更具体的提问方式,我欢迎对这个问题进行建议性编辑。)虽然不是最直接的,但你可以尝试一下 首先,设置一个.htaccess以透明地抓取所有.ogv视频,并用PHP处理它们 .htaccess Rewri

我知道ogg视频和mp4视频之间的一个区别是ogg视频没有描述文件大小的元数据,因此当加载ogg视频时,控件无法显示文件完全加载之前的剩余时间。如果ogg视频长度超过几分钟,这可能是一个问题。有没有办法在请求页面时获取此文件大小


(客户端开发人员,提出一个我认为有服务器端答案的问题。如果你能想出一种更具体的提问方式,我欢迎对这个问题进行建议性编辑。)

虽然不是最直接的,但你可以尝试一下

首先,设置一个.htaccess以透明地抓取所有.ogv视频,并用PHP处理它们

.htaccess

RewriteEngine On
RewriteRule ^(.*)\.ogv$ ogv.php?file=$1
ogv.php

<?php
$file = $_GET['file'] . '.ogv';

while ( strpos($file, '..') !== false )
{
    $file = str_replace('..', '', $file);
}

$filesize = filesize($file);

header("Content-Type: video/ogg");
header("Content-Transfer-Encoding: binary"); 
header("Content-Length: {$filesize}");
readfile($file);
exit()
?>

HTML:


var video_src=document.getElementById('video').src;
var xhr=new XMLHttpRequest();
xhr.open('GET',video_src,false);
xhr.send(空);
var size=xhr.getResponseHeader('Content-Length');
警报(大小);
这就是这个系统的工作原理。只需像普通一样链接一个.ogv视频,但是.htaccess文件首先捕获请求并将其发送到ogv.php。然后,PHP文件专门发送一个文件大小头,以防服务器无法自动执行。好吧,那对你还是没什么好处,对吧?然后,您可以对视频发出Ajax请求,并从HTTP头中提取文件大小


希望这有帮助。

投票通过了——就像答案一样,我认为它在正确的轨道上,但还没有准备好接受。当你说“万一服务器没有自动发送一个文件大小的头”——它通常会这样做吗?如果是,有没有办法读取该文件大小的标题?另外,当你说“从HTTP头中提取文件大小”——我想这是我首先想要做的,但我不确定如何做。明天我将用一个实际的文件来尝试这个方法,然后看看是否可以让它填充$filesize数据。现在的最后一句话:你说“虽然不是最直接的”——最直接的是什么?有没有一种我不知道的明显方式?许多服务器只发送图像的文件大小标题…而不是HTML和视频。这是一个小技巧,这样做。JavaScript size变量以字节为单位保存文件大小,因此您可以使用它执行任何操作。最后,不,我想不出更好的方法,除非你能完全访问服务器。这是一个黑客,但至少它应该在多种环境下工作;它不起作用,但我认为它在正确的轨道上。这里是错误的地方(我认为):当.htaccess文件更改要作为php处理的ogg文件时,它会将内容类型更改为text/html。尽管php文件试图将标题设置为video/ogg,但它已经设置好了。
<video src="video.ogv" id="video" controls></video>

<script>
var video_src = document.getElementById('video').src;
var xhr = new XMLHttpRequest();
xhr.open('GET', video_src, false);
xhr.send(null);
var size = xhr.getResponseHeader('Content-Length');
alert(size);
</script>