Учитывая ваш комментарий по созданию чего-то похожего на клон Netflix, я бы посоветовал сделать конечную точку PHP, которая экспортирует список файлов в формате JSON. При этом я не предлагаю вам создать файловый браузер, который позволяет вводить данные пользователем, поскольку во многих случаях это откроет вас для атак через каталог, и злонамеренный пользователь сможет получить доступ к вашему весь сервер. можно сделать правильно, но это сложно.
Вместо этого, почему бы не иметь базу данных, которая содержит имена файлов, типы, пути, ключевые слова, пути к миниатюрным изображениям и т. Д. Затем используйте JavaScript на стороне клиента для отправки запросов через ajax к PHP-сценарию, который обрабатывает доступ к базе данных и полностью контролирует доступ к файлу. Таким образом, когда пользователь нажимает на видео, вы можете вызвать другую конечную точку, которая запускает веб-сокет для потоковой передачи видео, и пользователь не может злонамеренно бродить по вашему серверу или загружать / красть ваши видеофайлы напрямую.
Вот пример перечисления некоторых файлов с вашего сервера. Для простоты кода я предполагаю, что jQuery здесь, но вы можете использовать другую библиотеку или собственный объект XMLHttpRequest:
$.ajax({
url: '/movies/list-all.php',
method: 'GET',
dataType: 'json'
}).done(function(data) {
if (typeof data === 'object' && typeof data !== null) {
// List the movies
for(var movie in data.movies) {
var movieDiv = '<div class="movie-item" data-id="' + movie.id + '">' +
'<img src="' + movie.thumbnail_path + '"><br>' +
'<p>' + movie.title + '</p>' +
'</div>';
$('#my-container-div').append(movieDiv);
}
}
});
Пример конечной точки PHP для просмотра фильмов:
<?php
/**
* list-all.php
*
* Assumes you have a PDO database connection setup already here as $db.
*/
$stmt = $db->query("SELECT * FROM movies");
if ($stmt instanceof PDOStatement) {
$movies = $stmt->fetchAll();
$response = (object) [
'total' => count($movies),
'movies' => $movies,
];
} else {
$response = (object) [
'total' => 0,
'movies' => [],
]
}
header('Content-Type: application/json');
echo(json_encode($response));
Демо (вроде):
var movieData = {
count: 3,
movies: [{
id: 1,
title: "Movie A",
thumb: "https://via.placeholder.com/150"
},
{
id: 2,
title: "Movie B",
thumb: "https://via.placeholder.com/150"
},
{
id: 3,
title: "Movie C",
thumb: "https://via.placeholder.com/150"
},
]
};
$(document).ready(function() {
if (typeof movieData === 'object' && typeof movieData !== null) {
// List the movies
for (var i in movieData.movies) {
var movie = movieData.movies[i];
var movieDiv = '<div class="movie-item" data-id="' + movie.id + '">' +
'<img src="' + movie.thumb + '"><br>' +
'<p>' + movie.title + '</p>' +
'</div>';
$('#movies').append(movieDiv);
}
}
});
.movie-item {
display: inline-block;
border: 2px solid #DDD;
margin: 10px;
text-align: center;
}
.movie-item:hover {
border: 2px solid #00aaca;
cursor: pointer;
}
.movie-item p {
color: #00aaca;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<h1>Movies</h1>
<div id="movies"></div>
</body>
</html>