如何将视频及其描述从Json附加到javascript中的DOM元素？_Javascript_Jquery_Html_Json_Html5 Video

如何将视频及其描述从Json附加到javascript中的DOM元素？

javascript jquery html json

如何将视频及其描述从Json附加到javascript中的DOM元素？,javascript,jquery,html,json,html5-video,Javascript,Jquery,Html,Json,Html5 Video,我有一个简单的侧边栏，我想显示来自json的多个视频，现在，我只想显示来自json的标题和视频，如下所示这是我到目前为止所拥有的 <ul class="sidebar"> <li> <h1 class="title"></h1> <video id="video_list" src=""></video> </li> </ul> 这里有一个问题：我能够显示每部电影的视频标题，

我有一个简单的侧边栏，我想显示来自json的多个视频，现在，我只想显示来自json的标题和视频，如下所示

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

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

这里有一个问题：我能够显示每部电影的视频标题，但我很难像json那样显示标题和相应的视频：(

我应该改变什么来获得我想要的？？？< /p> < p>你的循环不是定义每个元素。如果你想对每个标题和视频都有一个<代码>

<代码>，你需要做一些不同的事情。考虑一个为每个容器建立模板的函数。

工作示例：

HTML

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

<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>

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

$（函数（）{
var电影=[{
“头衔”：“旅行”，
“左”：201，
“顶级”：209，
“电影ID”：“10”，
“电影url”：http://techslides.com/demos/sample-videos/small.mp4",
“按钮”：[{
“左”：81，
“top”：51，
“开始时间”：1，
“结束时间”：2，
“buttonid”：“10_1”，
“btn_url”：http://techslides.com/demos/sample-videos/small.mp4"
}]
},
{
“标题”：“电子商务”，
“电影ID”：“20”，
“电影url”：http://techslides.com/demos/sample-videos/small.mp4",
“按钮”：[{
“左”：0，
“顶部”：0，
“开始时间”：1，
“结束时间”：2，
“宽度”：“200”，
“高度”：“60”，
“buttonid”：“20_1”，
}]
}
];
函数格式标题（t）{
var nt=t[0]。toUpperCase（）；
nt+=t.slice（1）；
返回nt；
}
函数makeListItem（v，p）{
var li=$（“”）；
变量标题=$（“”{
类：“标题”，
对于：“视频”+v.movieid
}).html（格式标题（v.title））.appendTo（li）；
var vObj=$（“”{
id:“视频”+v.movieid，
src:v.movie\u url
}).附件（李）；
li.附录（p）；
}
函数getVideoList（）{
$.each（电影、函数（索引、数据值）{
makeListItem（数据值，$（“.sidebar”）；
});
}
getVideoList（）；
});

在脚本中，视频列表被迭代，每个视频的数据被发送到函数中。然后函数B为每个视频创建一个新的

。这将包含一个

元素作为标题和一个

元素。然后所有这些元素都被附加到列表容器中

结果HTML

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

<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>

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



旅行


电子商务

希望帮助。

你的循环不是定义每一个元素。如果你想对每个标题和视频都有一个<代码>

<代码>，你需要做一些不同的事情。考虑一个为每个容器建立模板的函数。

工作示例：

HTML

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

<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>

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

$（函数（）{
var电影=[{
“头衔”：“旅行”，
“左”：201，
“顶级”：209，
“电影ID”：“10”，
“电影url”：http://techslides.com/demos/sample-videos/small.mp4",
“按钮”：[{
“左”：81，
“top”：51，
“开始时间”：1，
“结束时间”：2，
“buttonid”：“10_1”，
“btn_url”：http://techslides.com/demos/sample-videos/small.mp4"
}]
},
{
“标题”：“电子商务”，
“电影ID”：“20”，
“电影url”：http://techslides.com/demos/sample-videos/small.mp4",
“按钮”：[{
“左”：0，
“顶部”：0，
“开始时间”：1，
“结束时间”：2，
“宽度”：“200”，
“高度”：“60”，
“buttonid”：“20_1”，
}]
}
];
函数格式标题（t）{
var nt=t[0]。toUpperCase（）；
nt+=t.slice（1）；
返回nt；
}
函数makeListItem（v，p）{
var li=$（“”）；
变量标题=$（“”{
类：“标题”，
对于：“视频”+v.movieid
}).html（格式标题（v.title））.appendTo（li）；
var vObj=$（“”{
id:“视频”+v.movieid，
src:v.movie\u url
}).附件（李）；
li.附录（p）；
}
函数getVideoList（）{
$.each（电影、函数（索引、数据值）{
makeListItem（数据值，$（“.sidebar”）；
});
}
getVideoList（）；
});

在脚本中，视频列表被迭代，每个视频的数据被发送到函数中。然后函数B为每个视频创建一个新的

。这将包含一个

元素作为标题和一个

元素。然后所有这些元素都被附加到列表容器中

结果HTML

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

<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>

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



旅行


电子商务

希望有帮助。

您必须为列表中的每个项目动态创建新元素

Javascript：

var movies = [{
    "title": "travel",
    "url": "http://techslides.com/demos/sample-videos/small.mp4"
}, {
    "title": "ecommerce",
  "url": "http://techslides.com/demos/sample-videos/small.mp4"
}];

var sidebar = $('.sidebar');

movies.forEach(function(movie) {
    sidebar.append('<li><h1>' + movie.title + '</h1><video src="' + movie.url + '"></video></li>');
});

var电影=[{
“头衔”：“旅行”，
“url”：”http://techslides.com/demos/sample-videos/small.mp4"
}, {
“标题”：“电子商务”，
“url”：”http://techslides.com/demos/sample-videos/small.mp4"
}];
var边栏=$（'.sidebar'）；
电影。forEach（功能（电影）{
侧边栏.append（“”+movie.title+”）；
});

HTML

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

<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>

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

工作演示：

您必须为列表中的每个项目动态创建新元素

Javascript：

var movies = [{
    "title": "travel",
    "url": "http://techslides.com/demos/sample-videos/small.mp4"
}, {
    "title": "ecommerce",
  "url": "http://techslides.com/demos/sample-videos/small.mp4"
}];

var sidebar = $('.sidebar');

movies.forEach(function(movie) {
    sidebar.append('<li><h1>' + movie.title + '</h1><video src="' + movie.url + '"></video></li>');
});

var电影=[{
“头衔”：“旅行”，
“url”：”http://techslides.com/demos/sample-videos/small.mp4"
}, {
“标题”：“电子商务”，
“url”：”http://techslides.com/demos/sample-videos/small.mp4"
}];
var边栏=$（'.sidebar'）；
电影。forEach（功能（电影）{
侧边栏.append（“”+movie.title+”）；
});

HTML

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

<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>

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

工作演示：

所以创建一个视频元素并附加它？正如你所看到的，我试过了，但不起作用：（我在上面的代码中没有看到任何视频元素。你需要什么？你看不到吗