Построение последовательного видеоплеера - PullRequest
Новая
       0

Построение последовательного видеоплеера

0 голосов
/ 12 апреля 2020

У меня есть следующий код, и я запускаю его в Chrome, где я включил автоматическое воспроизведение со звуком. Путь загружается в sr c, но игра почему-то не работает. У меня все еще есть от l oop до l oop через каждое из видео, как только одно заканчивается, должно начаться следующее. Но, может быть, одна вещь за раз, как мне заставить это видео воспроизводиться?

Если кто-нибудь знает о готовой встроенной реализации, которая была бы великолепна.

Структура файла ... 

/player/index.html
/player/media.json
/player/jquery-3.5.0.min.js
/player/media/a.mp4

index. html & media. json

<html>
<head>
    <title>Video Player</title>
    <style>
    body {
        background-color: black;
    }
    #video {
        position:absolute;
        z-index:-1;
        top:0;
        left:0;
        width:100%; 
        height:100vh;
    }
    </style>
</head>
<body>
    <video autoplay id="video">
    <source id="source" src="" type="video/mp4">
    </video>
</body>
<script src="jquery-3.5.0.min.js"></script>
<script>
    $(document).ready(function(){
    $.getJSON( "media.json")
    .done(function( json ) {
        var id = 0;
        var file ='media/' + json[id].file;
        $('#source').attr('src', file);
        $('#video').trigger('play');
    })
    .fail(function(jqxhr, textStatus, error) {
        var err = textStatus + ", " + error;
        console.log( "Request Failed: " + err );
    });
    });
</script>
</html>

[
    {"file" : "a.mp4"},
    {"file" : "a.mp4"},
    {"file" : "a.mp4"},
    {"file" : "a.mp4"}
]

1 Ответ

0 голосов
/ 12 апреля 2020

https://jsfiddle.net/kg6eq7po/1/

очистить источник в html видеотеге 

<video autoplay id="video"></video>

, затем в вашем методе успеха заполните источники видео. когда вы заполняете, добавьте активный класс к первому 

json.forEach((x,index)=>{

    if(index==0){
       $('#video').append('<source class="active" id="source" src="'+x.file+'" type="video/mp4">');
    }
    else{
       $('#video').append('<source id="source" src="'+x.file+'" type="video/mp4">');
    }
})

и, наконец, добавьте список событий, который замечает, что видео заканчивается 

var myvid = document.getElementById('video');
myvid.addEventListener('ended', function(e) {
  var activesource = document.querySelector("#video source.active");
  var nextsource = document.querySelector("#video source.active + source") || document.querySelector("#video source:first-child");

  // deactivate current source, and activate next one
  activesource.className = "";
  nextsource.className = "active";

  // update the video source and play
  myvid.src = nextsource.src;
  myvid.play();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...