I am making a website that will access and then display my locally stored movies. I have several pages, but there are only two that are important for this. I want to be able to get permission on the first page and then play the movie on the second page. Let's just play the first movie on the list to make things more simple.
The problem is that I can not access the local files once I change pages.
Here is my code, I might have some little errors in this code, but I can fix those.
// is a comment
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
I don't know how to transfer localMovies or somehow accessing it from page2. I don't think import/export or global variables will work because I don't write what localMovies is. It is created in the first javascript file, and so if you make it global, it will just end up being empty on the second page.
I need to be able to create a URL on page one for each movie and send that to page two without the URL scope dying.
Send the variable localMovies to page two without having to physically write what localMovies is.
Somehow give or transfer permission to access the local files to page two.
Or something else that would do something similar.