How to add a poster to a specific video element from a list of multiple videos

Viewed 33

I want to add a poster tag on a specific video element where the src of that specific video leads to a 404 error.

To further explain: I got a list of videos queried from the database, some may lead to 404 error meaning the video files was not uploaded properly, my goal is to add a poster tag to these videos so I can tell the diffrence from the ones that work properly to the ones that don't

Getting the videos from the database

<?
$storage = new ObjectStorage;

$db->query("SELECT videoId, videoVsId, videoFile, videoUploadTime FROM videos WHERE vidOjId='$jbId' AND videoArchived = '0000-00-00 00:00:00' AND videoFile LIKE '%/videos/uploaded_videos/items/%'");
$i = 0;
while ($db->next_record()) {
    list($videoId, $videoVsId, $videoFile, $vidUploaded) = $db->Record;
    $vidname = after("_video_", $videoFile);

    $url = "https://website.website.com$videoFile";

    if($vidUploaded) {
        $vidUploaded = "Uploaded: ".date("H:i d/m/Y", strtotime($vidUploaded));
    } else {
        $vidUploaded = "Last edited: ".date("H:i d/m/Y", filemtime("../uploaded_videos/".$videoFile));
    }

    $brokenPoster = "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png";

Then I am checking if the url is broken

if(@file_get_contents($url)){
    $brokenPoster = "";
} else { 
    $brokenPoster;
}

At this point I am not sure how to do this, what I have done so far is the following

 ?>
        <div class="videoDiv_<?= $vidId ?>">
            
            <div class="videosDiv" >
                <video id="allVideos" width="320" height="240" controls 
                 poster="<?= $brokenPoster?>"           
                 class="img_<?= $videoId?>" src="<?= $videoFile."?nocache=".rand()?>"
                     type="video/mp4">
                </video>    
            </div>
            
        </div>

    <? $i++; } ?>

Obviously the above will show the poster to all the video elements which are 6 and only 2 of them are not playable dude to a 404.

Is there an easy way to show the poster to a specific video element?

1 Answers

You seem on the right track, but if you want to display a poster only on the broken link you could test if $brokenPoster is empty or not, like so:

<div class="videoDiv_<?= $vidId ?>">
            
    <div class="videosDiv" >
        <video id="allVideos" width="320" height="240" controls 
         <?php if (!empty($brokenPoster) { echo 'poster="'.$brokenPoster.'"'; } ?>
         class="img_<?= $videoId?>" src="<?= $videoFile."?nocache=".rand()?>"
             type="video/mp4">
        </video>    
    </div>
    
</div>
Related