How to make link sharing in php-CodePudding

Videos come from a folder and are automatically displayed on my website. But I am having a problem at implementing share feature. All I want to do is when share button is pressed, video's whole path like https:\\example.com\vid.mp4 should show up. I tried but it just shows the location of very last video on my page.

My php:

    $exten = '.mp4';
     $dir = __DIR__ . DIRECTORY_SEPARATOR . "gallery" . DIRECTORY_SEPARATOR;
     $videos = glob("$dir*.{mp4}", GLOB_BRACE);
   $alt = glob("$dir*.{webm,mp4,ogg}", GLOB_BRACE);
     if (count($videos) > 0) { foreach ($videos as $vid) {
        $base = basename($vid,'.mp4');
       printf("<div class='vi'><video src='gallery/%s' id='basename($vid,'.mp4')' loop='loop'></video>", rawurlencode(basename($vid)));
       echo '<div ><button  onclick="phprun()">SHARE</button></div>' ;
     
     echo "<div class='title'>".basename($vid,'.mp4')."</div></div>";
}}
  ?>

My js:

var result ="<?php echo('http://victure.freecluster.eu/gallery/'.basename($vid)); ?>"
const copy = document.getElementById("copy");
 const h1 = document.getElementById("h1");
 const h2 = document.getElementById("h2");
 
function phprun(){
 if (copy.style.display === "none") {
    copy.style.display = "block";
  } else {
    copy.style.display = "none";
  }
  h1.innerHTML="SHARE:  " "<?php echo(basename($vid,'.mp4')); ?>";
  h2.innerHTML=result;
//  alert(result)
}

It makes a div appear with video's path but it is showing the path of only one video.

Note: Keep in mind it is automated.

In short: How to display path of each video?

You can see working problem here: Problem

Thanks in advance:)

CodePudding user response：

What you need is to get the onclick target, like asked here.

On the caller:

<div >
   <video src="..." id="..." loop="..."></video>
   <div >
   <button  onclick="phprun(this)"> // <-----( GET TARGET )
      <svg ></svg>
   </button></div>
   <div >Demo from ShazamBolt8</div>
</div>

In the script:

function phprun(target) { // <-----( INJECT TARGET)

    // get the video element from the target
    let videoEl = target.parentNode.parentNode.childNodes[0];

    // retrieve the data you want (eg. the video url and title)
    let videoUrl = video.getAttribute('src');
    let videoTitle = video.documentQuerySelector('.title');

    // inject it into the desired containers
    h1.innerHTML = 'Share:'   videoTitle;
    h2.innerHTML = videoUrl;

    // do more stuff...
    if (copy.style.display === "none") {
        copy.style.display = "block";
    } else {
        copy.style.display = "none";
    }

}