«Сохранить как видео», но как это сделать с помощью javascript и html вместо этого? - PullRequest
Новая
       67

«Сохранить как видео», но как это сделать с помощью javascript и html вместо этого?

1 голос
/ 27 мая 2020

Когда у вас есть прямая ссылка на видео, вы обычно можете щелкнуть правой кнопкой мыши, и появится меню мыши. Оказавшись там, вы увидите Save Video As. Если вы нажмете на нее, видео загрузится на ваш компьютер.

Мне нужна такая же функциональность, но вместо этого я хочу создать кнопку на странице HTML, которая при нажатии будет делать то же самое, что и упомянуто выше.

Как я могу это сделать?

Давайте посмотрим на этот пример: У меня есть эта ссылка: https://invidious.fdn.fr/latest_version?id=NF_69Dyle1Y&raw&itag=22

Если вы go там и щелкните правой кнопкой мыши видео, вы увидите следующее: example video with right click menu

Нажав «Сохранить видео как», вы получите: enter image description here

Это диалоговое окно для сохранения видео в вашем локальном хранилище.

Теперь мой вопрос: я хочу сделать все это одним нажатием кнопки html. Я хочу, чтобы диалоговое окно для сохранения открывалось без необходимости набирать go на самом видео, щелкать правой кнопкой мыши и так далее. Есть ли способ сделать это?

html атрибут загрузки тега не работает. Я пробовал использовать такой URI 

<a href='"data:application/octet-stream,"+encodeURIComponent(`https://invidious.fdn.fr/latest_version?id=NF_69Dyle1Y&raw&itag=22`)' download="video.mp4">download video</a>

, но он тоже не работает.

1 Ответ

1 голос
/ 27 мая 2020

Если ваше видео находится в той же исходной странице (не в вашем случае) 

<a href="/path/to/video.mp4" download="video">Download</a>

Довольно просто, не требует Javascript , и работает во всех браузерах, кроме IE.

Если ваше видео из другого источника (ваш случай)

При тестировании своего решения я обнаружил, что загрузки из разных источников заблокированы Chrome и Firefox в целях безопасности.

a. Если вы управляете сервером

Если сервер реализует proprer CORS, или если у вас есть контроль над сервером и вы можете добавить эти CORS, вы можете использовать этот скрипт, который я бесстыдно взял из этого вопроса SO : 

<!-- The style="display:none;" is optional, you can remove it if you don't want the feature explained below. -->
<a id="download-link" href="javascript:alert('The video is not yet ready!')" download="video" style="display:none;">Download</a>
<script>

var a = document.getElementById("download-link");

function downloadResource(url, filename) {

  // Current blob size limit is around 500MB for browsers
  if (!filename) filename = url.split('\\').pop().split('/').pop();
  fetch(url, {
      headers: new Headers({
        'Origin': location.origin
      }),
      mode: 'cors'
    })
    .then(response => response.blob())
    .then(blob => {
      let blobUrl = window.URL.createObjectURL(blob);

      // Place the resource in the href of the link
      a.href = blob;

      // Bonus : Only show the link if and when the Javascript code has executed
      a.style.display = "inline";
    })
    .catch(e => console.error(e));

}

downloadResource("https://invidious.fdn.fr/latest_version?id=NF_69Dyle1Y&raw&itag=22");

</script>

Я добавил небольшую функцию, которая будет держать ссылку скрытой до тех пор, пока файл не будет полностью загружен. Вы, конечно, можете изменить это в зависимости от ваших требований.

b. Если вы не контролируете сервер

Если он использует CORS и разрешает все источники (или, по крайней мере, ваше происхождение), приведенный выше сценарий должен работать.

Если это не так, вы ' К сожалению, нам не повезло. Вы все еще можете открыть видео в новом окне и попросить пользователя щелкнуть правой кнопкой мыши и «Сохранить как» вручную; это менее изящно, но, по крайней мере, работает.

...