cp6/index.php

## index.php
<?php
$file = "jellyfish.mkv";
$thumb = "thumbnail.jpg";

if (isset($_POST['time_string'])) {
    exec("ffmpeg -y -ss {$_POST['time_string']} -i $file -vframes 1 -q:v 1 $thumb");
} elseif (!file_exists("thumbnail.jpg")) {
    exec("ffmpeg -y -ss 00:00:01 -i $file -vframes 1 -q:v 1 $thumb");
}
?>
<html lang="en">
<head>
    <title>Create thumbnail concept</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.1.0/litera/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.7.0/nouislider.css"/>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header">
                    <h2 class="text-center">Drag toggle to create thumbnail</h2>
                </div>
                <div class="card-body px-4">
                    <?php
                    function getSeconds(string $file): float
                    {
                        return exec("ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 $file");
                    }

                    $seconds = getSeconds($file);
                    ?>
                    <img id="thumbnail" class="img-fluid" src="<?= $thumb ?>" width="100%"
                         alt="<?= $file ?> video thumbnail">
                    <div class="row text-center mt-4">
                        <div id="slider"></div>
                    </div>
                    <div class="row text-center mt-3">
                        <div class="col-12">
                            <p>Thumbnail from video time: <code><span id="seconds">00:00:01</span></code></p>
                            <a id="download" href="thumbnail.jpg" download="thumbnail.jpg" class="btn btn-primary"
                               role="button">Download thumbnail</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.7.0/nouislider.min.js"></script>
<script type="application/javascript">
    let slider = document.getElementById("slider");

    noUiSlider.create(slider, {
        start: 0,
        connect: true,
        step: 1,
        range: {
            min: 0,
            max: <?=$seconds?>
        }
    });

    let min_element = document.getElementById("seconds");

    slider.noUiSlider.on("change", function (values, handle) {
        let slider_value = slider.noUiSlider.get();
        let seconds_string = new Date(slider_value * 1000).toISOString().substr(11, 8);
        min_element.innerHTML = seconds_string;
        createThumb(seconds_string)
    });

    function createThumb(time) {
        $.ajax({
            type: "POST",
            url: "index.php",
            data: {"time_string": time},
            success: function (result) {
                let d = new Date();
                $("#thumbnail").attr("src", "thumbnail.jpg?" + d.getTime());
            }
        });
    }
</script>
</body>
</html>
	<?php
	$file = "jellyfish.mkv";
	$thumb = "thumbnail.jpg";

	if (isset($_POST['time_string'])) {
	exec("ffmpeg -y -ss {$_POST['time_string']} -i $file -vframes 1 -q:v 1 $thumb");
	} elseif (!file_exists("thumbnail.jpg")) {
	exec("ffmpeg -y -ss 00:00:01 -i $file -vframes 1 -q:v 1 $thumb");
	}
	?>
	<html lang="en">
	<head>
	<title>Create thumbnail concept</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.1.0/litera/bootstrap.min.css"/>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.7.0/nouislider.css"/>
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div class="col-12">
	<div class="card shadow">
	<div class="card-header">
	<h2 class="text-center">Drag toggle to create thumbnail</h2>
	</div>
	<div class="card-body px-4">
	<?php
	function getSeconds(string $file): float
	{
	return exec("ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 $file");
	}

	$seconds = getSeconds($file);
	?>
	<img id="thumbnail" class="img-fluid" src="<?= $thumb ?>" width="100%"
	alt="<?= $file ?> video thumbnail">
	<div class="row text-center mt-4">
	<div id="slider"></div>
	</div>
	<div class="row text-center mt-3">
	<div class="col-12">
	<p>Thumbnail from video time: <code><span id="seconds">00:00:01</span></code></p>
	<a id="download" href="thumbnail.jpg" download="thumbnail.jpg" class="btn btn-primary"
	role="button">Download thumbnail</a>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.7.0/nouislider.min.js"></script>
	<script type="application/javascript">
	let slider = document.getElementById("slider");

	noUiSlider.create(slider, {
	start: 0,
	connect: true,
	step: 1,
	range: {
	min: 0,
	max: <?=$seconds?>
	}
	});

	let min_element = document.getElementById("seconds");

	slider.noUiSlider.on("change", function (values, handle) {
	let slider_value = slider.noUiSlider.get();
	let seconds_string = new Date(slider_value * 1000).toISOString().substr(11, 8);
	min_element.innerHTML = seconds_string;
	createThumb(seconds_string)
	});

	function createThumb(time) {
	$.ajax({
	type: "POST",
	url: "index.php",
	data: {"time_string": time},
	success: function (result) {
	let d = new Date();
	$("#thumbnail").attr("src", "thumbnail.jpg?" + d.getTime());
	}
	});
	}
	</script>
	</body>
	</html>