Show first frame of a video while creating video-list dynamically

See more:

Javascript

PHP

Ajax

MySQL

<?php
        $ch = '"';
        $dir = "videos/";
        $i = 1;
        //
        if (is_dir($dir)) {
            if ($dh = opendir($dir)) {
                while (($file = readdir($dh)) !== false) {

                    if ($file == ".") {
                        echo '..<br>';
                    } elseif ($file == "..") {
                        echo '..<br>';
                    } else {
                        echo ''.$file.'<br>';
                        echo '<br><video id="vid_' . $i . '" autobuffer preload="auto" style="width:200px;height:300px" src="videos/' . $file . '"  önclick=' . $ch . 'add(this.src)' . $ch . '></video>';
                        
                        $i = $i + 1;
                    }
                }
            }closedir($dh);
        }
        ?>

In my code: the tags: autobuffer preload="auto" are not loading first frame of the video which links also created dynamically.
Actually, I want to create a video-list as like YouTube.