Jump to content

Read directory, then switch video


Sigmahokies

Recommended Posts

Hi everyone,

I'm still learning, but getting deeper now. I'm trying to use JavaScript and PHP in one page in website. I'm trying to make a switch video source on html by click on button. I believe I'm doing right in PHP, but Javascript seem something is missing. I don't understand how it gone work...it said undefined.

 

<!doctype html>
<html>
<head>
    <link href="css/grammar.css" rel="stylesheet" type="text/css">
    <link rel="icon" href="images/sigma.png">
    <script type="text/javascript" src="js/checkbox.js"></script>
    <script>
        function clickvideo() {
            let path  = document.getElementById("video1").button;

            document.getElementById("display").innerHTML = "<video width='450' controls style='border-radius: 5px;' height='240' type='mp4'>" +
                "<source src='UPLOADS/Breakfast/" + path + "'></video>";
        }

    </script>
</head>
<body>
<table class="table">
    <tr><td><video width="450" controls style="border-radius: 5px;"><source src="video/Ha_Demo.mp4"></video></td></tr>
        <tr><td>
                <div id='display'><video width='450' controls style='border-radius: 5px;'><source src="UPLOADS/Breakfast/hello.mp4"></video></div></td></tr>
    <tr><td>
                <?php

    $video = opendir("UPLOADS/Breakfast/");

    while(($listvideo = readdir($video)) !== FALSE) {
        if(preg_match("/^[^\.].*$/", $listvideo)) {
            echo "<button id='video1' onclick='clickvideo()'>".$listvideo."</button>&nbsp;";
        }
    }
    ?>
        </td></tr>
</body>
</html>

Edited by Sigmahokies
Link to comment
Share on other sites

You have to be specific where it will get path data, at the moment it's pointing to object of html button with I'd="video1", but it seems your php will provide multiple buttons with same id reference, which is not allowed. An id must be unique within a single page.

 

 

Link to comment
Share on other sites

To style it yes! To identify which button was clicked you can add 'this' (no quotes) as argument for the function call

onclick='clickvideo(this)'

Then add a parameter to function

function clickvideo(elem) {
// rest of code
        } 

elem will be a parameter variable, that refers to  the specific element that triggered the onclick event

If you wish to retrieve the text between <button>...</button> tags, simply using elem.innerHTML will retrieve that text.

Link to comment
Share on other sites

this refers to the scope of execution in Javascript.  When you use it in an event attribute, it refers to the element that the event was triggered on.  So using it in the onclick attribute and passing it to a function means that you're passing the button element that was clicked to the function.

Scope and this in Javascript are fundamental to the language.  Suggesting scope isn't useful indicates that you don't really understand how the language works.

Link to comment
Share on other sites

Did you even try it? If you add

On 3/2/2019 at 5:44 PM, dsonesuk said:

function clickvideo(elem) {

alert(elem.id)

// rest of code

 }

It will alert you the id reference of the element just clicked ie the button with id 'video1'. If it can do that you must be able to retrieve whatever you want from that button.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...