如何在两个 html 页面之间传输本地视频文件

编程问答 2022-05-01

问题描述

我正在制作一个可以访问并显示我本地存储的电影的网站。我有几页，但只有两页对此很重要。 我希望能够在第一页上获得许可，然后在第二页上播放电影。让我们播放列表中的第一部电影，让事情变得更简单。

问题是我换页后就不能访问本地文件了。

这是我的代码，我在这段代码中可能有一些小错误，但我可以修复它们。

// 是注释

page1.html

<script src = "page1.js"></script>

<body>
  // ask user to select movies
  <label for = "movies">Select your movies:</label>
  <input type = "file" id = "movies" multiple/><br>

  // stores movies and changes location to page 2
  <button id = "start" onclick = "loadMovies()">Load movies and play first one</button>
</body>

page1.js

function loadMovies() {
  // store movies from input in localMovies
  const selectedItems = document.getElementById("movies");
  const localMovies = selectedItems.files;
  
  // change location to second page
  location.href = "page2.html";
}

page2.html

<script src = "page2.js"></script>

<body onload = "startMovie()>
  <video id = "video" controls><video>
</body>

page2.js

function startMovie() {
  // make and then set a URL for the first movie in the list
  movieURL = url.createObjectURL(localMovies[0]);
  videoTag = document.getElementById("video");
  videoTag.src = movieURL

我不知道如何传输 localMovies 或以某种方式从 page2 访问它。我不认为导入/导出或全局变量会起作用，因为我不写 localMovies 是什么。它是在第一个 javascript 文件中创建的，因此如果您将其设为全局，则它最终会在第二页上为空。

我需要能够在第一页为每部电影创建一个 URL，并将其发送到第二页，而不会导致 URL 范围消失。
将变量 localMovies 发送到第二页，而无需实际编写 localMovies 是什么。
以某种方式授予或转移访问本地文件到第二页的权限。
或者其他可以做类似事情的东西。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptlocal-fileswebweb