0

PHP newbie here. I'm trying to make a simple page where you upload an mp4 file, and that file is automatically displayed on another page. However, I'm having difficulties when changing the src content for the video.

Here's my upload.php:

<!DOCTYPE html>
<html>
<body>

<form action="" method="post" enctype="multipart/form-data">
    Select video to upload:
    <input type="file" name="file" id="file">
    <br>
    <input type="submit" value="submit" name="submit">
</form>

</body>
</html>

<?php 

if (isset($_POST)) {
    if (isset($_FILES['file'])) {

        $file_name = $_FILES['file']['name'];
        $file_tmp  = $_FILES['file']['tmp_name'];
        $file_type = $_FILES['file']['type'];
        $file_ext  = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);

        if ($file_ext != "mp4") {
            echo "Please select an mp4 file.";
        } else {
            move_uploaded_file($file_tmp, "./video.mp4");
            header("Location: success.php");
        }
    }
}

?>

And my index.php within the same directory:

<html>
<body>

<video autoplay loop muted>
  <source src="video.mp4" type="video/mp4">
</video>

</body>
</html>

If I upload a mp4, it does display properly on index.php. However, if I then upload a different mp4, it still displays the first one, despite the content changing (I know this because if I go into the console and click on the src in the video tag, it is the second video I uploaded.)

So if a user has index.php open on their browser, and a new file is added using upload.php, is it possible to automatically update the content on index.php without having to refresh the page? I'm not finding any solutions online regarding this, maybe I'm just searching the wrong questions.

I appreciate any and all help, thank you.

llamagish
  • 159
  • 1
  • 1
  • 11
  • You have to notify the clients somehow that something has changed. Look into server-sent events, and the EventSource API. – Brad Jul 14 '19 at 19:43

2 Answers2

1

I am not sure exactly how you have things implemented. Do you even leave the index.php page to upload a video (i.e. doing that via AJAX somehow), or do go to the upload.php page and then go back to the index.php page and expect to see the new video ? Also, is the video name always video.mp4, even if it is a different video file. There are a lot of ways to deal with that sort of problem, and you may have a caching issue if the name of the video file is static.

For images, one way to deal with that is to append something to the name of the files as a query string, but that has some issues, and there is Apache servers have an Etag feature that could be helpful. For the query string thing, something like:

" type="video/mp4">, although the problem with that is that it may force reloading the video even if it doesn't change. Using the SessionID might be an option because that would not change throughout a Session. There is also a PHP filemtime() function that gives the modification time for a file. That would be more appropriate really as far as having a unique url with regards to the caching issues.

There are a few other SO posts that address. your issue (I think).

You might want to read over those:

Force Reloading of Images

Etags in Apache

SScotti
  • 2,158
  • 4
  • 23
  • 41
  • Appreciate the response, I'll look into those links. Regarding your question "or do go to the upload.php page and then go back to the index.php page and expect to see the new video", yes this is what I'm expecting. – llamagish Jul 14 '19 at 20:07
  • Do you dynamically change the name of the video, or is it always video.mp4 and you are overwriting it ? – SScotti Jul 14 '19 at 20:23
  • In my first implementation, it was always video.mp4, but I changed it to what Mark has above – llamagish Jul 14 '19 at 20:34
1

there. I have experienced a similar case with images. I think the browser saves cache data so the first video is played.

In this case, you can do it as follows.

<video autoplay loop muted> <source src="video.mp4?<?php echo time();?>" type="video/mp4"> </video>

This prevents the browser from caching video.mp4 file.

Ever Dev
  • 1,882
  • 2
  • 14
  • 34
  • That did fix the cache issue, thank you very much. Now I need to figure out how to automatically refresh the `index` page when a new file is submitted in the `upload` page. – llamagish Jul 14 '19 at 20:33