Плейлист в HTML5 Video

@Виктор ДПМ · Регистрация: 29.09.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте. На данный момент существует такой код:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html >
  <head>
    <title>ДПМ Плеер</title>
    <script type="text/javascript" src="load.js">      
    </script>
    
    </head>
    <body onload="init();" >        
    
    <video src="Video1.mp4" id="Video1" autoplay controls style="border: 0px solid black;" height="240" width="320" title="video element">            
    </video>
    
    <div id="buttonbar" style="display: none;")>
       
    </div>   
    <div id= "inputField" style="display:none;" >
        <label>Введите URL-адрес видео <br/>
        <input type="text" id="videoFile" style="width: 300px;"  title="video file input field" value="Video1.mp4" />        
        <button id="loadVideo" title="Load video button" >Загрузить... </button>
        </label>
    </div>
    <div title="Error message area" id="errorMsg" style="color:Red;"></div>
 
<br/>Список видеофайлов .mp4 :<br/><br/>
    
    </body>
</html>
<?php
$dir = 'C:/OpenServer/domains/xn--80aswg.xn--p1ai/';
 
$f = scandir($dir);
 
foreach ($f as $file){
    if(preg_match('/\.(mp4)/', $file)){
        echo $file.'<br/>';
    }
}
?>

load.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
        function init() {        
            var video = document.getElementById("Video1");                                               
            if (video.canPlayType) {   
                document.getElementById("buttonbar").style.display = "block";                
                document.getElementById("inputField").style.display = "block";
                function vidplay(evt) {
                    if (video.src == "") {  
                        getVideo();
                    }
                    button = evt.target;                                     
                    if (video.paused) {   
                        video.play();
                        button.textContent = "||";
                    } else {                
                        video.pause();
                        button.textContent = ">";
                    }
                }
                function getVideo() {
                    var fileURL = document.getElementById("videoFile").value;                     
                    if (fileURL != "") {
                        video.src = fileURL;
                        video.load();  
                        document.getElementById("play").click();  
                    } else {
                        errMessage("Enter a valid video URL"); 
                    }
                }
                function setTime(tValue) {
                    try {
                        if (tValue == 0) {
                            video.currentTime = tValue;
                        }
                        else {
                            video.currentTime += tValue;
                        }
                        
                     } catch (err) {
                         
                     errMessage("Video content might not be loaded");
                       }
             }         
                document.getElementById("loadVideo").addEventListener("click", getVideo, false);
                video.addEventListener("error", function (err) {
                    errMessage(err);
                }, true);
            } 
        }

При открытии страницы воспроизводится заранее заданный видеофайл Video1.mp4
В поле "Введите URL-адрес видео" ручками вводится название видео из списка внизу страницы.
После нажимаем кнопку "Загрузить...", видео подставляется в поле src и воспроизводится в плеере.

А теперь вопрос:
Как реализовать подстановку видео при окончании видео? То есть у нас существует какой то стандартный файл "Video1.mp4" который воспроизводится при открытии страницы и существует неограниченное количество файлов .mp4 которые формируются в список. Как только файл "Video1.mp4" заканчивается должны воспроизводится файлы со списка по порядку 0,1,2,3...и т.д. Если список заканчивается то возвращается к началу. При всём при этом сам список должен быть динамическим. Самообновляться через заданный промежуток времени либо реагировать на изменения в папке(добавление, удаление видео). Вроде всё)

П.С. Занимаюсь недавно, понимаю что код за меня писать никто не будет. Надеюсь что поможете советом. Как, с помощью чего реализовать задачу?

@Виктор ДПМ · 21.10.2015, 03:17 **[ТС]**

В общем актуальная на данный момент версия. Воспроизводит по кругу все файлы .mp4 в папке /video, но пропускает последний доходя только до предпоследнего. Также нужно реализовать динамическое обновление списка без участия пользователя. Если у кого есть идеи как, напишите.

index.php

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
    <meta http-equiv="content-type" content="text/html charset=UTF-8">
    <title>HTML5 video with playlists - jsFiddle demo by lastrose</title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.js'></script>
    <style type='text/css'>
        #playlist,video{background:#666;width:400px;padding:20px;}
        .active a{color:#5DB0E6;text-decoration:none;}
        li a{color:#eeeedd;background:#333;padding:5px;display:block;}
        li a:hover{text-decoration:none;}
    </style>
    <script type='text/javascript' src='videoplayer.js'>
    </script>
</head>
<body>
    <video autoplay id="video" preload="auto" tabindex="0" controls="" type="video/mp4" poster="" src="video/Video1.mp4">
    Sorry, your browser does not support HTML5 video.
    </video>
    <ul id="playlist">
    <?php include "list.php"; ?>
    </ul>
</body>
</html>

list.php

PHP
1
2
3
4
5
6
7
8
<?php
    $dir="video/";
    foreach (glob("{$dir}*.{mp4}", GLOB_BRACE) as $filename) {
        $pathParts = pathinfo($filename);
        //print_r($pathParts);
        echo sprintf('<li><a href="%s"><title="%s"></a></li>',$filename, $pathParts['filename']);
    }
?>

videoplayer.js

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
$(window).load(function(){
var video;
var playlist;
var tracks;
var current;
 
init();
function init(){
    current = 0;
    video = $('video');
    playlist = $('#playlist');
    tracks = playlist.find('li a');
    len = tracks.length - 1;
    video[0].volume = .10;
    playlist.find('a').click(function(e){
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, video[0]);
    });
    video[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
            link = playlist.find('a')[0];
        }else{
            link = playlist.find('a')[current];    
        }
        run($(link),video[0]);
    });
    }
function run(link, player){
        player.src = link.attr('href');
        par = link.parent();
        par.addClass('active').siblings().removeClass('active');
        video[0].load();
        video[0].play();
        }
});//]]>

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Киев стоит - украинская песня zorxor 28.01.2026 wfWdiRqdTxc О Господи, Вечный, Ты . . . Я помоги, Бесконечный. . . Я прошу Ты. . . Я погибаю, спаси. . . Я прошу Тебя Вечный. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

Плейлист в HTML5 Video

Решение