如何在第一页上浏览本地文件中的视频并在第二页上播放？

Question

I have a case like this, this is the first page: FirstPage On the first page i want to browse which video i will play on the second page. This is the view of second page : SecondPage What i want is when i choose which video that i will play, so the second page that already opened before, will automatically play the video without redirecting me from first page to second page.

What i've tried is i choose the video on first page by modal form, and pass the video name to monitor.php and on the monitor.php will showing the video name. Then on the second page im using interval function which checking every 1 second whether a post has occured on the monitor.php or not. But, the result is video wont playing on the second page. I've try to checking the video name value on monitor.php, the result is okay, but video still not running on the second page.

this is my code on first page :

<div class="modal fade" id="modalForm" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                <span aria-hidden="true">&times;</span>
                <span class="sr-only">Tutup</span>
            </button>
            <h4 class="modal-title" id="labelModalKu">Pilih Video</h4>
        </div>
        <!-- Modal Body -->
        <div class="modal-body">
            <p class="statusMsg"></p>
            <form action="../apps/coba.php" method="post">
                <div class="form-group">
                    <label>PILIH</label>
                    <input name="filelocation" type="file" class="form-control" placeholder="Pilih File ..">
                </div>                                                                  
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                    <input type="submit" class="btn btn-primary" value="Simpan">
                </div>
            </form>
        </div>
    </div>
</div>

this is the code of monitor.php :

if (isset($_POST["filelocation"])) {
$src = $_POST["filelocation"];
echo json_encode($src);

}

and this is the code on the second page that checking every 1 second on monitor.php :

setInterval(function() {
        $.post("../apps/coba.php", function( src ){
            var videoNow = src;
            showVideo();
    }, "json"); 
    }, 1000);

Answer 1

What is inside ../apps/coba.php? I assume this file runs your monitor.php file, but correct me if I'm wrong.. In $_POST are data that Php received in current HTTP request. Each time you make request (like sending <form> or using $.post()) this array will contains different data, independent of previous requests. In second page you send no post data, so $_POST will be always empty.

I assume both pages are opened on the same computer, so you can do this with Javascript only:

1. Open second page from first with window.open(), so you can have second page in variable:

<button type="button" onclick="var secondPage = window.open('secondPage.html')">Open second page</button>

1. Instead of sending form with post, run showVideo() function on second page:

<form onsubmit="secondPage.window.showVideo(this.filelocation.value);return false;">
  <div class="form-group">
    <label>PILIH</label>
    <input name="filelocation" type="file" class="form-control" placeholder="Pilih File ..">
  </div>                                                                  
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
    <input type="submit" class="btn btn-primary" value="Simpan">
  </div>
</form>