How to Click on filename on my PHP web page to play video on HTML5 video player?

1.4k Views Asked by Zac1 At 19 October 2024 at 19:27

I am a (self-learning) beginner. I have PHP code on one page (page 1) to display a list of video files available on the server.

foreach ($filelist1 as $file2)
{
    echo "<a href='???'>". $file2."</a><br>";
}

I have another page (page 2) that has the video player.

<video id="videoPlayer" width="75%" height="75%" preload controls= "controls" tabindex="0" poster="/videolibrary/2.jpg">
        <source id='mp4Source' src="/videolibrary/<?php echo $usr; ?>/1.webm" type="video/mp4" />
        <source id='oggSource' src="/videolibrary/<?php echo $usr; ?>/1.webm" type="video/ogg" />
        <source id='webmSource' src="/videolibrary/<?php echo $usr; ?>/1.webm" type="video/webm" />

Page 1 is embedded in Page 2 as an IFRAME. My question is, when I click on the filename there on Page 1, I want the video player on Page 2 to play that video. Could you please explain how to achieve this? That would be most helpful to many beginners.

Original Q&A

There are 1 best solutions below

Ahs N On 25 June 2015 at 06:51

Here is this is how I would do it.

Code for page1.php:

<html>
<body>
<h5>Video List: </h5>
    <ul>
        <?php 
            $filelist = scandir("videolibrary");
            foreach($filelist as $key=>$video){
                if($key >1){
                    echo '<li><a href="#" onclick="parent.document.querySelector(\'#myVideo > source\').src = \''. $video. '\'">'.$video.'</a></li>';
                }
            }
        ?>
    </ul>
</br>
</body>
</html>

Code for page2.php:

<html>
<body>

<center>
    <video id="MyVideo" width="720" height="480" controls>
        <source src="" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</center>
<iframe src="page1.php" name="viframe" id="viframe" width="80%" height="60%">
  <p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>

Requirement: For the above codes to work, create a folder named "videolibrary" in the same directory as page1.php and page2.php

Test: Open page2.php, you should get a list of video files found under the videolibrary directory in the iFrame which is displayed by page1.php. Clicking on one of them will load it in the iFrame via javascript.

How to Click on filename on my PHP web page to play video on HTML5 video player?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in PHP

Related Questions in HTML

Related Questions in VIDEO

Related Questions in HREF

Trending Questions

Popular # Hahtags

Popular Questions