Jump to content
Sigmahokies

Read directory, then switch video

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

Share this post


Link to post
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.

 

 

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...