Скачивайте видео в браузере, а не воспроизводите его на новой вкладке [CORS]

Question

У меня <a> и внутри его атрибута href, у меня есть URL-адрес видео от стороннего API, при нажатии на который <a> браузер открывает новую вкладку и Воспроизведение видеовместо его загрузки!

ПРОБЛЕМА: Что мне нужно сделать, это загрузить видео сразу после нажатия на <a> вместо его воспроизведения в новой вкладке и принудительно нажатьпользователь Right Click затем выбирает Save Video As вариант, чтобы загрузить его вручную ... Просто нажмите Download, и браузер начнет загружать это видео!

ПРИМЕЧАНИЕ: Ясоздание приложения JavaScript, поэтому мне нужно решение на JavaScript, а не на PHP, оно должно работать и на всех браузерах ...

РЕДАКТИРОВАТЬ: Я пробовал download атрибут и он не работает, потому что он только одного происхождения!

ОБНОВЛЕНИЕ: Единственное решение, которое я нашел, было +7 лет, оно манипулирует с помощью .htaccess файл, вы можете проверить это в этой статье CSS Tricks , у нее есть общая проблема, я не могу иметь2 ссылки: Watch Video и Download Video с использованием этого решения ... Многие разработчики упоминали эту ошибку там, но никто еще не исправил ее!

Answer 1

Поскольку это URL-адрес видео от стороннего API, вы можете решить проблему двумя способами:

1. Обратитесь к поставщику API, попросите его добавить заголовок «Content-Type».: application / octet-stream ".
2. Прокси стороннего API и добавьте заголовок" Content-Type: application / octet-stream "в прокси.

Да, ключ должен установить заголовок типа содержимого в ответе http.

Answer 2

Мой лучший вариант - перенаправить пользователя на отдельную страницу, чтобы заставить браузер загрузить файл вместо его просмотра (изображение, видео, pdf)

Пример PHP с использованием функции readfile create aфайл download.php

<?php
$file = 'monkey.gif';

if (file_exists($file)) {
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename="'.basename($file).'"');
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    readfile($file);
    exit;
}
?>

Надеюсь, что поможет.

Источник

Answer 3

• Вы не можете изменить заголовок стороннего сервера.

• Вы не хотите реализовывать сервер, который может проксировать запрос и обновлениезаголовок.

Единственное решение, которое я вижу, это загрузить и обработать контент в браузере js с помощью request или axios, а затем предложить его пользователю (но вы должны оставить его).в памяти, которая не подходит для большого видео)

Answer 4

Поскольку конечная точка поддерживает CORS, вы можете использовать my file download lib для сохранения содержимого вместо его отображения.

download("http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4");

Онлайн-демонстрация: http://pagedemos.com/v84rawmzntzt/output/

Answer 5

вам нужно установить заголовки, такие как Content-Disposition с сервера следующим образом

  Content-Description: File Transfer
  Content-Type: application/octet-stream
  Content-Disposition: attachment; filename="filename.jpg"

, чтобы разрешить предварительный просмотр и загрузку, вы можете добавить эти заголовки в зависимости от параметра запроса, например, еслиURL имеет ?download, добавьте эти заголовки, чтобы браузер загрузил файл вместо его просмотра.