Как сделать HTML5 видеоплеер JS

Question

Я пытался добиться следующего функционала: У меня есть прямая ссылка на видео, на стороннем сервере (файл mp4). Мой сайт должен служить просто плеером, то есть получать ссылку на видео в параметрах get запроса и просто воспроизводить его.

Я не разбираюсь в js поэтому попросил об этом chat-gpt, он выдал мне это:

<!DOCTYPE html>
<html>
<head>
  <link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
</head>
<body>
  <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
    <source src="" type="video/mp4">
  </video>
  
  <script>
    // Получаем значение video_url параметра из GET-запроса
    const urlParams = new URLSearchParams(window.location.search);
    const videoUrl = urlParams.get('video_url');

    // Выбираем video элемент по его ID
    const video = videojs('my-video');

    // Устанавливаем источник видео с переданной ссылкой
    video.src({ type: 'video/mp4', src: videoUrl });

    // Автоматически запускаем воспроизведение
    video.play();
  </script>
</body>
</html>

Этот код работает исправно на всех устройствах кроме устройств apple

Я вычитал что это может быть связано с ограничением (Cross-Origin Resource Sharing). Так же, chat gpt мне подсказал что возможным решениепм будет использование JSONP

Но как это сделать я не понимаю, gpt выдал следующий код: Конечный код для полноценной реализации JSONP на сервере с использованием PHP и клиентской части в HTML может выглядеть следующим образом.

Серверная часть на PHP (jsonp_endpoint.php):

<?php
// Получение параметра callback
$callback = $_GET['callback'];

// Получение параметра video_url
$videoUrl = $_GET['video_url'];

// Формирование данных для JSONP-ответа
$responseData = array(
    'video_url' => $videoUrl
);

// Преобразование данных в JSON-строку
$responseJson = json_encode($responseData);

// Возвращение JSONP-ответа
header('Content-Type: application/javascript; charset=utf-8');
echo $callback . '(' . $responseJson . ')';
?>

Клиентская часть в HTML:

<!DOCTYPE html>
<html>
<head>
    <title>JSONP Example</title>
</head>
<body>
    <h1>JSONP Example</h1>

    <script>
        // JSONP-функция обратного вызова
        function handleVideoResponse(response) {
            const videoUrl = response.video_url;
            console.log('URL видео:', videoUrl);

            // Добавьте свою логику обработки URL видео здесь
        }

        const script = document.createElement('script');
        script.src = 'jsonp_endpoint.php?callback=handleVideoResponse&video_url=' + encodeURIComponent('https://example.com/video.mp4');
        document.head.appendChild(script);
    </script>
</body>
</html>

Но это не работает, в html ссылка не возвращается, callback не вызывается, хотя при прямом get запросе на jsonp_endpoint.php?callback=handleVideoResponse&video_url=https://example.com/video.mp4 ссылка возвращается. Мне не обязательно использовать JSONP мне просто нужно найти решение которое позволит мне воспроизводить видеофайлы со сторонних серверов.

P.S Использование сторонних плееров, таких как Video.js не помогло.

БЛОГ НА HUSL

Как сделать HTML5 видеоплеер JS

Ответы (0 шт):