How to make link sharing in php

Question

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 class="sh"><button class="share" 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:)

_"but it is showing the path of only one video"_ - well of course it is, because you hard-coded _one_ specific video path directly in the function. Either pass the path to the function as a parameter, or dynamically read it from the DOM. — CBroe, Apr 21 '22 at 13:23
@CBroe can you answer it? What do you mean? Please answer it to make me and others clear. — TJBro, Apr 21 '22 at 13:52
@CBroe is right. You hard-coded the content you want to display. What you need is to make it dynamic. My answer explains you how to do this. — Edouard, Apr 22 '22 at 19:37

Edouard · Accepted Answer · 2022-09-14T04:07:29.887

What you need is to get the onclick target (like explained here) in order to make your content dynamic.

1. 'onclick' event: pass the 'this' parameter to your function phprun(). For an event, 'this' as a parameter refers to the target of the event (the div on which the event has been fired).

<div class="vi">
   <video src="..." id="..." loop="..."></video>
   <div class="sh">
   <button class="share" onclick="phprun(this)"> // <-----(GET THE EVENT TARGET)
      <svg class="..."></svg>
   </button></div>
   <div class="title">Demo from ShazamBolt8</div>
</div>

2. In your function: inject the event target ( phprun(target){...} ) then use it in your logic. Example of code for your function:

function phprun(target) { // <-----( INJECT THE EVENT 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 = videoEl.getAttribute('src');
    let videoTitle = videoEl.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";
    }

}

This is the concept. Adapt this code to you own needs. I'm not going to make your app entirely. And it returns 'undefined' for which var, etc... Verify you didn't make a mistake in your code too while adapting the code above ;) As i said, your code is very messy. — Edouard, Apr 22 '22 at 19:27

How to make link sharing in php

1 Answers1