HTML для воспроизведения файлов.MOV в Safari 8 - Что изменилось?
У меня есть довольно большая библиотека файлов QuickTime .MOV, которые обслуживаются страницей, которая прекрасно работала; HTML не менялся годами, но кто-то заметил, что он больше не работает в Safari, хотя все остальные браузеры, кажется, в порядке.
Вместо этого, теперь в Safari 8.0.7 в OS X, он показывает кнопку "Отсутствует плагин", которая при нажатии выскакивает предупреждение, которое говорит:
Эта веб-страница содержит контент, для которого требуется интернет-плагин.
Эта страница содержит контент, который не может быть отображен, потому что его тип не указан. Эта страница может иметь плагин для загрузки и установки:
http://www.apple.com/quicktime/download/
Хотите открыть эту страницу?
Нажатие OK приводит меня туда, но все, что я получаю с OS X, это "QuickTime встроен в Mac OS X". Нет плагина.
Хотя я не хотел бы ничего лучше, чем переключиться на формат.MP4 и использовать тег VIDEO HTML5, я стараюсь поддерживать обратную совместимость. Кроме того, новый тег видео может воспроизводить только форматы MP4, WebM и Ogg. Кажется абсурдом, что Apple не может воспроизводить файлы QuickTime в своем собственном браузере. [см. ОБНОВЛЕНИЕ ниже]
Кроме того... это может. Загружается прямой URL-адрес в файл.MOV, что позволяет предположить, что дело не в формате, а в виновном HTML-файле. На самом деле я вижу QuickTime 7.7.3 в списке плагинов.
Чтогенерируется это:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="256" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=7,3,0,0" align="middle">
<param name="src" value="file.mov">
<param name="kioskmode" value="true">
<embed src="file.mov" width="320" height="256" pluginspage="http://www.apple.com/quicktime/download/" align="middle" kioskmode="true">
</object>
Я говорю "сгенерировано", потому что я следую рекомендациям Apple по написанию HTML-сценариев, в которых говорится, что в этом примереac_quicktime.js
скрипт (v1.2), написанныйApple, для генерации правильного кода для данного браузера.
<script language="javacript" type="text/javascript">
QT_WriteOBJECT('file.mov',
'320', '256',
'',
'kioskmode', 'true',
'pluginspage','http://www.apple.com/quicktime/download/',
'align', 'middle');
</script>
Проверка DOM с помощью веб-инспектора Safari показывает, что приведенный выше JavaScript действительно генерирует блок object/embed.
Я даже утвержден сwget
что MIME-тип правильный при извлечении медиа-файла напрямую:
Content-Type: video/quicktime
Небольшой эксперимент с использованием Ghostery и uBlock Origin показывает, что ничего не блокируется. Контролируя сайт, он подтверждает, что трекеров нет, и, поскольку он генерирует вышеуказанный контент, он не блокирует JavaScript.
Дополнительные эксперименты показывают, что эта проблема возникает и на моем iPhone и iPad. Нет кнопки "Отсутствует плагин", просто пустое отверстие на холсте, где должен быть фильм.
ffprobe сообщает действительный видеофайл (H.264, 320x240; AAC 48000 Гц, моно, 29,97 кадров в секунду, 19,8 МБ, 294,68 кбит / с):
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'file.mov':
Metadata:
major_brand : qt
minor_version : 537199360
compatible_brands: qt
creation_time : 2007-09-17 02:37:42
Duration: 00:08:42.39, start: 0.000000, bitrate: 302 kb/s
Stream #0:0(eng): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, mono, fltp, 80 kb/s (default)
Metadata:
creation_time : 2007-09-17 02:37:42
handler_name : Apple Alias Data Handler
Stream #0:1(eng): Video: h264 (Main) (avc1 / 0x31637661), yuv420p(tv, smpte170m/smpte170m/bt709), 320x240, 173 kb/s, 29.97 fps, 29.97 tbr, 2997 tbn, 5994 tbc (default)
Metadata:
creation_time : 2007-09-17 02:37:42
handler_name : Apple Alias Data Handler
encoder : H.264
Stream #0:2(eng): Data: none (rtp / 0x20707472), 32 kb/s
Metadata:
creation_time : 2007-09-17 02:37:42
handler_name : Apple Alias Data Handler
Stream #0:3(eng): Data: none (rtp / 0x20707472), 9 kb/s
Metadata:
creation_time : 2007-09-17 02:37:42
handler_name : Apple Alias Data Handler
Есть мысли о том, что может происходить?
ОБНОВЛЕНИЕ № 1:
Было предложено использовать тег VIDEO HTML5, например, так:
<video width="320" height="240" controls>
<source src="file.mov" type="video/quicktime">
Your browser does not support the video tag.
</video>
К моему удивлению, это действительно "сработало" в Safari. Тем не менее, он ужасно сломался в других браузерах, которые не поддерживали HTML5, а также в тех, которые признавали, что это не поддерживаемый формат видео.
Поэтому было подтверждено, что тег VIDEO не является решением, поскольку это нарушает требование обратной совместимости.
НОВАЯ ИНФОРМАЦИЯ:
У меня есть признание.file.mov
Показанное выше было сделано для упрощения примера для читателей.Фактическим значением является URL-адрес, содержащий скрипт PHP, который выбирает, какой файл.MOV отображать.
Я только что обнаружил, что когда я использую файл с .mov
, скорее, чем.php
, страница работает просто отлично.Раньше это работало как PHP ... годами.
Более тревожным представляется то, что плагин не смотрит наContent-Type
это правильно передается, но расширение файла. Это либо ошибка со стороны Apple, либо ошибка по моей (и я надеюсь, что это так). Но на данный момент это мешает мне обслуживать динамический контент.
JavaScript-функция Apple генерирует правильные теги объекта / встраивания с моим URL, а статический снимок показывает, что если я использую файл с.mov
расширение работает, но не сценарий, даже если оба доставляют идентичный контент.
Я делаю дальнейшие эксперименты, чтобы утверждать, что Тип контента встречается правильно.wget
говорит, что это так, веб-инспектор Safari, кажется, говорит иначе.
ОБНОВЛЕНИЕ № 2:
Что-то странное наверняка происходит.
Если я загружуfile.mov
в браузере напрямую играет.
Если я загружу этоfile.php
в браузере напрямую тоже играет.
<?php
$filename = "file.mov";
$handle = fopen( $filename, "rb" );
if ( $handle ) {
header( "Content-type: video/quicktime" );
header( "Accept-Ranges: bytes" );
header( "Content-Length: " . filesize( $filename ) );
fpassthru( $handle );
flush();
exit;
} // if handle
?>
Если я загружу этоfile.html
в браузере происходят интересные вещи. Первая запись показывает отсутствующий плагин, остальные играют.
<HTML>
<BODY>
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="256" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0" align="middle">
<param name="src" value="file.php">
<param name="kioskmode" value="true">
<embed src="file.php" width="320" height="256" pluginspage="http://www.apple.com/quicktime/download/" align="middle" kioskmode="true">
</object>
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="256" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0" align="middle">
<param name="src" value="file.mov">
<param name="kioskmode" value="true">
<embed src="file.mov" width="320" height="256" pluginspage="http://www.apple.com/quicktime/download/" align="middle" kioskmode="true">
</object>
<video width="320" height="240" controls>
<source src="file.php" type="video/quicktime">
Your browser does not support the video tag.
</video>
<video width="320" height="240" controls>
<source src="file.mov" type="video/quicktime">
Your browser does not support the video tag.
</video>
</BODY>
</HTML>
Это предполагает, по крайней мере для меня, что у Apple есть ошибка в том, что она не будет загружать динамический контент.
СОГЛАСУЕМОСТИ? Не согласен? Мысли?
Мне не очень интересно, каков "правильный" способ сделать это.
Еще один эксперимент, я изменил video/quicktime
в video/mp4
и это работало для версии Safari.
Боюсь, что мне, возможно, придется определить, является ли браузер Safari, обрабатывает ли он тег VIDEO и, если да, создать этот хак с помощью .php
код выбора вместо тегов объекта / встраивания Apple.
ОБНОВЛЕНИЕ 3:
Обнаружено, что Safari выдает это сообщение об ошибке:
Failed to load resource: Plug-in handled load
Нашел этот интересный пост, в котором кто-то еще подтверждает, что видео из PHP не работают, но напрямую обслуживаются.
Это говорит о том, что видео больше не следует отправлять через BLOB-серверы.
РЕШИТЬ:
Это была проблема. Там, где раньше можно было отправлять весь файл, Safari и iOS больше не нравятся.
Вот почему доставка одного и того же контента велась по-разному. Проблема заключалась в механизме доставки, а не в содержании.
Смотрите помеченный ответ для рабочего кода PHP и кредитов.
1 ответ
Эта статья Stackru дала мне рабочее решение:
Использование php для вывода видео в формате mp4
Проблема в том, что Safari и iOS не хотят, чтобы весь файл.MOV доставлялся сразу, и на самом деле плагин выдаст ошибку. Скорее это хочет разделить это на части.
Вот код, который решил проблему, в значительной степени взят из ответа выше и обернут в функцию:
function RenderVideo( $file ) {
$fp = @fopen($file, 'rb');
$size = filesize($file); // File size
$length = $size; // Content length
$start = 0; // Start byte
$end = $size - 1; // End byte
header('Content-type: video/mp4');
header("Accept-Ranges: 0-$length");
if (isset($_SERVER['HTTP_RANGE'])) {
$c_start = $start;
$c_end = $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 $start-$end/$size");
exit;
}
if ($range == '-') {
$c_start = $size - substr($range, 1);
}else{
$range = explode('-', $range);
$c_start = $range[0];
$c_end = (isset($range[1]) && is_numeric($range[1])) ? $range[1] : $size;
}
$c_end = ($c_end > $end) ? $end : $c_end;
if ($c_start > $c_end || $c_start > $size - 1 || $c_end >= $size) {
header('HTTP/1.1 416 Requested Range Not Satisfiable');
header("Content-Range: bytes $start-$end/$size");
exit;
}
$start = $c_start;
$end = $c_end;
$length = $end - $start + 1;
fseek($fp, $start);
header('HTTP/1.1 206 Partial Content');
}
header("Content-Range: bytes $start-$end/$size");
header("Content-Length: ".$length);
$buffer = 1024 * 8;
while(!feof($fp) && ($p = ftell($fp)) <= $end) {
if ($p + $buffer > $end) {
$buffer = $end - $p + 1;
}
set_time_limit(0);
echo fread($fp, $buffer);
flush();
}
fclose($fp);
exit();
}