Воспроизведение видео HTML5 из ​​файла JSON с помощью кнопок «Вперед» и «Назад»

Question

У меня есть файл JSON, который содержит видеоданные, например, заголовок видео и ссылку на видео.

Вот jsffiddle: demo

Вот пример файла JSON:

[{

        "title": "How to create video?",
        "link": "https://storage.googleapis.com/coverr-main/mp4/Sunset-Desert-Run.mp4"
    },

    {
        "title": "How to add audio?",
        "link": "https://app.coverr.co/s3/mp4/Sand-Slow-Walk.mp4"
    },
    {
        "title": "How to add music?",
        "link": "https://app.coverr.co/s3/mp4/Steaming-Yellowstone.mp4"
    },
    {
        "title": "How to add scene?",
        "link": "https://app.coverr.co/s3/mp4/Skater-in-the-Park.mp4"
    },
    {
        "title": "How to preview a video?",
        "link": "https://app.coverr.co/s3/mp4/Stop-Sign.mp4"
    },
    {
        "title": "How to delete video?",
        "link": "https://app.coverr.co/s3/mp4/RV-Park.mp4"
    }
]*

Я хочу, чтобы когда пользователь нажимал кнопку «предыдущая», он воспроизводил предыдущее видео и отображал заголовок видео, а если пользователь нажимал кнопку «Далее», он должен воспроизводить следующее видео и также отображать заголовок видео.вот визуально, как это выглядит.

вот что я пробовал до сих пор.

HTML

        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div id="video-container">

<h1 class="movie-title">Movie title</h1>

   <video class="videoplayer" id="video-player_transformed"
                            playsinline autoplay muted>
 <source src="https://app.coverr.co/s3/mp4/Sand-Slow-Walk.mp4"
                                type="video/mp4">

   </video>

</div>

<div class="btns">
    <div class="prev">
           Prev
   </div>

   <div class="next">
           next
   </div>
 </div>

Вот CSS

body{
  background: gray;
}
#video-container{
position: relative;
  height: 314px;
  width: 800px;
  display: flex;
  justify-content: center;
   align-self: center;
   overflow: hidden;
}
.movie-title{
position: absolute;
top: 0px;
}

.btns{
  display: flex;
  justify-content: center;
}
.prev, .next{
  display: flex;
  width: 100px;
  height: 50px;
  background: red;
  margin: 20px;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
}
video{
height: 400px;
width: 400px;
}

Вот JS

$(document).ready(function () {

      var myData;

            $.ajax({
              dataType: 'json',
              url: 'https://videomill-bot.audiencevideo.com/videoexplainer/videoexplainer/data/video.json',
              data: myData,
              success: function(data) {
                console.log($('.videoplayer').append(myData));
        myData = myData;

              },
            })


var player = document.querySelector('#videoplayer');
var i = 0;
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');

prev.addEventListener('click',function(){
    player.src = myData[i == 0 ? myData.length-- : i--];
    video.play();
},false);

next.addEventListener('click',function(){
    player.src = myData[i ==myData.length-- ? 0 : i++];
    video.play();
},false);

player.src = myData[i];
player.play(); //init the video player


});

К сожалению, я получаю следующую ошибку после нажатия кнопок next или prev.

Uncaught TypeError: Cannot read property 'length' of undefined

Что мне нужно изменить, чтобы получить то, что я хочу?любая помощь или предложение будут оценены спасибо.

Answer 1

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

Чтобы решить эту проблему, вы можете попробовать что-то вроде модифицированного примера ниже.

(function($) {
    'use strict';

    /**
     * Ajax response data will be stored in this local variable
     * @var    {Array}
     */
    var myData = [];

    /**
     * jQuery video element
     * @var    {Object}
     */
    var $player = $('video.videoplayer');

    /**
     * jQuery movie title element
     * @var    {Object}
     */
    var $title = $('.movie-title');

    /**
     * jQuery previous button element
     * @var    {Object}
     */
    var $prev = $('.prev');

    /**
     * jQuery next button element
     * @var    {Object}
     */
    var $next = $('.next');

    /**
     * Custom jQuery function to add sources to a media element
     * @param    {Array|String}    sources
     */
    $.fn.setSource = function(sources) {

        // Get the media tag (video/audio)
        var tag = this.prop('tagName').toLowerCase();

        // Clear any existing sources
        this.empty();

        // Check if sources paramater is an array
        if (Array.isArray(sources)) {

            // Loop through each source
            for (let i = 0; i < sources.length; i++) {
                var src = sources[i];
                var type = /(?:\.([^.]+))?$/.exec(src); // Get file extention (.mp4, .ogv, .webm etc)

                if (type[0]) {
                    type = type[0].replace('.', '');
                }
                // Create and append a source tag
                this.append($('<source>', {
                    src: src,
                    type: tag + '/' + type
                }));
            }
        } else {
            this.attr('src', sources);
        }
    };

    /**
     * Reusable function to update player element
     * @param    {Object}    data    Expects an object with `link` and `title` attributes
     */
    function updatePlayer(data) {
        $player.setSource(data.link); // Set the video source
        $title.text(data.title); // Add the title
    }

    // Disable actions because we have no data
    $prev.prop('disabled', true);
    $next.prop('disabled', true);

    // Send request to server to recieve data
    $.ajax({
        dataType: 'json',
        url: 'https://videomill-bot.audiencevideo.com/videoexplainer/videoexplainer/data/video.json'
    }).then(function(data) {
        myData = data; // replace `myData` with the ajax response data

        // Check if we have data
        if (myData && myData.length) {

            // Re-enable actions because we have data
            $prev.prop('disabled', false);
            $next.prop('disabled', false);

            updatePlayer(data); // Set the video source (see functions above)
            $player.get(0).play(); // Play the html5 video*
            // *Most browsers will not allow playing without any user interaction
        }

    }).fail(function(error) {
        // Request failed, inform user
        alert('There was an error downloading videos, please refresh and try again.');
        console.warn(error);
    });

    // On click set video element to PREVIOUS video in myData
    $prev.on('click', function() {

        // Check if we have data before attempting to access it
        if (myData && myData.length) {
            updatePlayer(myData[i === 0 ? myData.length - 1 : --i]);
            $player.get(0).play();
        }

        // Prevent default click action
        return false;
    });

    // On click set video element to NEXT video in myData
    $next.on('click', function() {

        // Check if we have data before attempting to access it
        if (myData && myData.length) {
            updatePlayer(myData[i === myData.length - 1 ? 0 : ++i]);
            $player.get(0).play();
        }

        // Prevent default click action
        return false;
    });

})(jQuery || window.jQuery);

(это не было проверено, и есть много способов достичь того, что вы хотите сделать, но это должно дать вам представление о том, с чего начать.)

Несколько замечаний:

• Вы используете jQuery, поэтому я обновил селекторы элементов, чтобы максимально использовать его.
• В вашей функции успеха ajax вы переопределяете myData как саму себя, а не с данными ответа (myData = myData изменено на myData = data)
• Я создал функции для устранения дублирования кода.
• Наконец, будьте осторожны при автоматическом воспроизведении медиа-элементов с использованием javascript, поскольку применяются ограничения браузера.