如何显示来自JSON的视频？

Question

I have a simple app which contains a dropdown list of videos from a JSON array,

JSON data contains, title, id, buttons, position, URL

I want the user to select a video from the drop-down list something like this

so if user select eg travel from the drop-down list it should display a travel video which contains buttons in it something like this,

So far this is what I have tried

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();

       });

Here is js fiddle I am working on : live demo

What do I need to do to get what I want ? So far am stuck, any help or suggestions will be appreciated.

Answer 1

There is a lot of work ahead of you. It's not clear what you want to "do" with the buttons, you did not have content for them or actions. So I am not going to address that for now.

In regards to the Select, here are the basics I worked from:

• On Change, use the selection to get more details from data source
• Created a <video> container or update one from the selection

Here is a working example: 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();
  });
});

I feel it's better to break up things into functions. When the User clicks to show the drop down, it gets populated. Now the User will make a selection, and trigger the change event. Here we can determine what to do with that selection.

We update the <video> element via jQuery to now have the proper source and we then show it.

HTML5 does not have a way to add buttons to the video. You can control the video, start, stop, etc... but you can't add things to it. Now yu can create buttons and float them over. If you want them to appear at specific times, you need to watch the timer and trigger them to show. As I said, a long road ahead of you.

Hope this helps.