Видео HTML5 не будет зацикливаться
У меня есть видео в качестве фона для веб-страницу, и я пытаюсь зациклить ее. Вот код:
Несмотря на то, что я сказал видео зацикливаться, это не так. Я также попытался заставить его зацикливаться с атрибутом onended (согласно этот поток поддержки Mozilla , я также пробовал этот бит jQuery). Пока ничего не помогло. Это проблема с Chrome или моим кодом?
Изменить:
Я проверил сетевые события и ГОЛОВУ рабочей копии ( http://fhsclock-labs.heroku.com/no-violence ) по сравнению с приложением, которое я пытаюсь заставить работать. Разница в том, что рабочая копия обслуживает видео из статического актива на Heroku (по-видимому, через Varnish), а моя - из GridFS (MongoDB).
Вкладка «Сеть» в инспекторе Chrome показывает, что в моем приложении видео запрашивается три раза. Один раз статус «ожидает», второй - «отменен» и последний раз - 200 OK. В рабочей копии отображаются только два запроса, один из которых находится в состоянии ожидания, а другой - 206 Частичное содержимое. Однако после того, как видео проиграется один раз, этот запрос изменится на «Отменен», и он сделает другой запрос для этого видео. В моем приложении этого не происходит.
Что касается Типа, в моем приложении два из них - «undefined», а другой - «video / mp4» (как и должно быть). В рабочем приложении все запросы - «видео / mp4».
Вдобавок я получаю Ресурс интерпретируется как Другой, но передается с неопределенным типом MIME. предупреждения в консоли.
Я не совсем уверен, с чего начать. Я считаю, что проблема связана с сервером, так как обслуживание файла в качестве статических ресурсов работает нормально. Возможно, сервер отправляет неправильный тип контента. Это может быть проблема с GridFS. Я не знаю.
Во всяком случае, источник здесь . Мы ценим любую информацию, которую вы можете предложить.
1 ответ
Я имел ту же проблему и неизбежно решил проблему путем потоковой передачи содержания.
, например, это - код с PHP laravel блейд-HTML-код, который запрашивает к потоковой передаче маршрута:
<video>
<source src="{{route('getVideoStream',$videoId)}}" type="video/mp4"/>
</video>
в Контроллере я передам видео потоком и возвращу его как laravel функция потока:
public function getVideoStream($videoId){
$path = $pathOfVideo;
$headers = [
'Content-Type' => 'video/mp2t',
'Content-Length' => File::size($path),
'Content-Disposition' => 'attachment; filename="start.mp4"'
];
$stream = new VideoStream($path);
return response()->stream(function () use ($stream) {
$stream->start();
});
}
и Класс VideoStream класс потоковой передачи, который я нашел от сути GitHub :
class VideoStream
{
private $path = "";
private $stream = "";
private $buffer = 102400;
private $start = -1;
private $end = -1;
private $size = 0;
function __construct($filePath)
{
$this->path = $filePath;
}
/**
* 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();
header("Content-Type: video/mp4");
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');
$this->start = 0;
$this->size = filesize($this->path);
$this->end = $this->size - 1;
header("Accept-Ranges: 0-" . $this->end);
if (isset( Я имел ту же проблему и неизбежно решил проблему путем потоковой передачи содержания.
, например, это - код с PHP laravel блейд-HTML-код, который запрашивает к потоковой передаче маршрута:
[110] в Контроллере я передам видео потоком и возвращу его как laravel функция потока:
[111] и Класс VideoStream класс потоковой передачи, который я нашел от сути GitHub :
[112]SERVER['HTTP_RANGE'])) {
$c_start = $this->start;
$c_end = $this->end;
list(, $range) = explode('=', Я имел ту же проблему и неизбежно решил проблему путем потоковой передачи содержания.
, например, это - код с PHP laravel блейд-HTML-код, который запрашивает к потоковой передаче маршрута:
[110] в Контроллере я передам видео потоком и возвращу его как laravel функция потока:
[111] и Класс VideoStream класс потоковой передачи, который я нашел от сути GitHub :
[112]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();
}
}