如何将视频及其描述从Json附加到javascript中的DOM元素? [英] How to append videos and its description from Json to DOM elements in javascript?

问题描述

我有一个简单的边栏，我想显示json中的多个视频，现在，我只想在下面显示json中的标题和视频.

I have a simple sidebar which I want to display multiple videos from json, for now, I want just to show title and video from json something like this below.

这是我到目前为止所拥有的.

Here is what I have so far.

<ul class="sidebar"> 
  <li>
  <h1 class="title"></h1>
  <video id="video_list" src=""></video>
  </li>
</ul>

这是JavaScript

Here is 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"
            }]
        },
        {
            "title": "ecommerce",
            "movieid": "20",
            "movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
            "buttons": [{
                "left": 0,
                "top": 0,
                "start_time": 1,
                "end_time": 2,
                "width": '200',
                "height": '60',
                "buttonid": "20_1",
            }]
        },

    ];


    function getVideoList() {
        var title = $('.title');
        var videoID = $('.video_list');
        $.each(movies, function(index, dataValue) {
            var movie_title = $("h1", {
                value: dataValue.movieid
            }).html(dataValue.title).appendTo(title);

            var movie_video = $("#video_list", {

            }).html(dataValue.movie_url).appendTo(videoID);
        });

    }

    getVideoList();


});

这是jsfiffle:实时演示 我能够显示每部电影的视频标题，但是我却很难像json中一样显示标题和相应的视频:(

Here is jsfiffle: live demo I am able to display video titles for each movie but I am struggling to display both title and corresponding video as in json :(

为了获得我想要的东西我应该改变什么?

What am I supposed to change to get what I want???

推荐答案

您的循环未定义每个元素.如果每个标题和视频都需要<li>，则需要做一些不同的事情.考虑创建一个为每个容器构建模板的函数.

Your loop is not defining each element. If you want a <li> for each title and video, you need to do something different. Consider making a function that builds the template for each container.

工作示例: https://jsfiddle.net/Twisty/e2q4kd13/12/

HTML

<ul class="sidebar">
</ul>

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"
      }]
    },
    {
      "title": "ecommerce",
      "movieid": "20",
      "movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
      "buttons": [{
        "left": 0,
        "top": 0,
        "start_time": 1,
        "end_time": 2,
        "width": '200',
        "height": '60',
        "buttonid": "20_1",
      }]
    }
  ];

  function formatTitle(t) {
    var nt = t[0].toUpperCase();
    nt += t.slice(1);
    return nt;
  }

  function makeListItem(v, p) {
    var li = $("<li>");
    var title = $("<h1>", {
      class: "title",
      for: "video_" + v.movieid
    }).html(formatTitle(v.title)).appendTo(li);
    var vObj = $("<video>", {
      id: "video_" + v.movieid,
      src: v.movie_url
    }).appendTo(li);
    li.appendTo(p);
  }

  function getVideoList() {
    $.each(movies, function(index, dataValue) {
      makeListItem(dataValue, $(".sidebar"));
    });
  }

  getVideoList();
});

在您的脚本中，将迭代视频列表，并将每个视频的数据发送到该函数.然后，函数b为每个视频创建一个新的<li>.这将包含标题的<h1>元素和<video>元素.然后将其全部添加到列表容器.

In your script, the video list is iterated and data for each video is sent to the function. The Function thenb makes a new <li> for each video. This will contain a <h1> element for the title and a <video> element. It is all then appended to the list container.

生成的HTML

<ul class="sidebar">
  <li>
    <h1 class="title" for="video_10">Travel</h1>
    <video id="video_10" src="http://techslides.com/demos/sample-videos/small.mp4"></video>
  </li>
  <li>
    <h1 class="title" for="video_20">Ecommerce</h1>
    <video id="video_20" src="http://techslides.com/demos/sample-videos/small.mp4"></video>
  </li>
</ul>

希望有帮助.

这篇关于如何将视频及其描述从Json附加到javascript中的DOM元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！