'How to modify the variable "video" of my JavaScript function "loadMedia" by the data of PHP variables retrieved from the Database?

My following loadMedia function (from my JavaScript script) normally allows me to open Pop-up images via the Masonry-JS library:

function loadMedia(src, className) {
 
    var video = $("<img>");
 
    video.on("load", function() {
        $("." + className + " a").append(video);
 
        clearTimeout(timer);
 
        timer = setTimeout(function() {
            $(".imageResults").masonry();
        }, 500);
 
    });
 
    video.on("error", function() {
 
        $("." + className).remove();
 
        $.post("ajax/setBroken.php", {src: src});
 
    });
 
    video.attr("src", src);
 
}

The JavaScript for the "Plyr-JS" Player is as follows:

const player = new Plyr('video', { captions: { active: true } });
 
// Expose player so it can be used from the console
window.player = player;

And I added my PHP code in "ajax/setBroken.php" to retrieve the extension of the videos file and the thumbnail image is the following:

$query = $con->prepare("SELECT * FROM videos");
while($row = $query->fetch(PDO::FETCH_ASSOC)) {
    $videoLink = $row["videoLink"];
    $thumbnail = $row["thumbnail"];
    $vidExtension = $row["video_extension"];                
}

So I have a few very important questions:

1 - How to replace the content of the JavaScript variable var video = $("<img>"); by the HTML code of the following "Plyr-JS" player:

<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
    <source src="/path/to/video.mp4" type="video/mp4" />
</video>

???

2 - How to pass the $thumbnail variable to the data-poster attribute of the <video> tag so as to replace its "/path/to/poster.jpg" value with this $thumbnail variable knowing that the PHP code that retrieves this variable is in ajax/setBroken.php file ???

3 - How to also pass the $videoLink variable to the src attribute of the <source> tag so as to replace its "/path/to/video.mp4" value with this $videoLink variable knowing that the PHP code that retrieves this variable is in ajax/setBroken.php file ???

4 - How also, pass the $vidExtension variable to the type attribute of the <source> tag so as to replace its "video/mp4" value with this $vidExtension variable knowing that the PHP code that retrieves this variable is in the file ajax/setBroken.php ???

5 - And finally, at what level should add the above JavaScript Code of the "Plyr-JS" Player ???

Thank you please help me.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source