Как отобразить видео из JSON?

Question

У меня есть простое приложение, которое содержит выпадающий список видео из массива JSON,

Данные JSON содержат заголовок, идентификатор, кнопки, положение, URL-адрес

Я хочу, чтобы пользователь выбрал видео из выпадающего списка примерно так

поэтому, если пользователь выбирает, например, travel из выпадающего списка должно отображаться видео о путешествии, в котором есть кнопки вроде этого,

Пока это то, что я пытался

HTML

<div class="showme"> Show dropdown
  <select id="movies-container">
     <option value="" selected disabled hidden>Choose here</option>
  </select>
</div>
<video src="" id="video">
      results goes here
    </video>

JS

function PopulateDropDownList() {
           //Build an array containing movies records.

            var movies = [
              {
                "title": "travel",
                "left": 201,
                "top": 209,
                "movieid": "10",
                "movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
                "buttons": [
                  {
                    "left": 81,
                    "top": 51,
                    "start_time": 1,
                    "end_time": 2,
                    "buttonid": "10_1",
                    "btn_url": "http://techslides.com/demos/sample-videos/small.mp4"
                  }
                ]
              }
            ]

            var movieContainerID = document.getElementById("movies-container");


            //Add the Options to the DropDownList.
            for (var i = 0; i < movies.length; i++) {
                var option = document.createElement("OPTION");
                    console.log(movies[i]);


                    // movieContainerID.prop('selectedIndex', 0);
                //Set movie Name in Text part.
                option.innerHTML = movies[i].title;

                //Set movieId in Value part.
                option.value = movies[i].movieid;

                //Add the Option element to DropDownList.
                movieContainerID.options.add(option);
            }
        }
        $('.showme').on('click', function(){
             $('#movies-container').addClass('show');
              PopulateDropDownList();

       });

Вот js fiddle, над которым я работаю: live demo

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

Answer 1

Впереди много работы. Непонятно, что вы хотите «делать» с кнопками, у вас не было контента для них или действий. Так что я не буду сейчас это решать.

Что касается Select, вот основы, с которых я работал:

• При изменении используйте выбор, чтобы получить более подробную информацию из источника данных
• Создан <video> контейнер или обновлен один из выбранных

Вот рабочий пример: https://jsfiddle.net/Twisty/Lb7eh3zc/31/

HTML

<div class="showme"> Show dropdown
  <select id="movies-container">
    <option value="" selected disabled hidden>Choose here</option>
  </select>
</div>
<video id="show-video" style="display:none;"></video>

JavaScript

$(function() {
  var movies = [{
    "title": "travel",
    "left": 201,
    "top": 209,
    "movieid": "10",
    "movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
    "buttons": [{
      "left": 81,
      "top": 51,
      "start_time": 1,
      "end_time": 2,
      "buttonid": "10_1",
      "btn_url": "http://techslides.com/demos/sample-videos/small.mp4"
    }]
  }];

  function PopulateDropDownList() {
    var movieContainerID = $("#movies-container");

    //Add the Options to the DropDownList.
    $.each(movies, function(k, v) {
      console.log(v);
      var option = $("<option>", {
        value: v.movieid
      }).html(v.title).appendTo(movieContainerID);
    });

    movieContainerID.change(function() {
      var movieid = $("option:selected").val();
      var movie = getMovie(movieid);
      $("#show-video").attr({
        src: movie.movie_url,
        controls: "controls",
        type: "video/mp4"
      }).show();
    });
  }

  function getMovie(id) {
    var m = false;
    $.each(movies, function(k, v) {
      if (v.movieid == id) {
        m = v;
      }
    });
    return m;
  }

  $('.showme').on('click', function() {
    $('#movies-container').addClass('show');
    PopulateDropDownList();
  });
});

Я чувствую, что лучше разбить вещи на функции. Когда пользователь нажимает, чтобы отобразить раскрывающийся список, он заполняется. Теперь пользователь сделает выбор и запустит событие change. Здесь мы можем определить, что делать с этим выбором.

Мы обновляем элемент <video> через jQuery, чтобы теперь иметь правильный источник, и затем мы показываем его.

HTML5 не имеет возможности добавлять кнопки к видео. Вы можете управлять видео, запускать, останавливать и т. Д., Но вы не можете добавлять к нему что-либо. Теперь вы можете создавать кнопки и плавать над ними. Если вы хотите, чтобы они появлялись в определенное время, вам нужно посмотреть таймер и активировать их показ. Как я уже сказал, вам предстоит долгий путь.

Надеюсь, это поможет.