Question

我想知道是否可以在页面上动态创建多个youtube嵌入。 Youtube视频ID存储在JSON对象中。

我希望脚本可以动态创建这样的东西：

我已经使用Youtube Javascript API加载一个英雄视频，我可以想象我可以使用该代码作为基本，但它属于该网站的另一部分，然后是英雄视频。有人有什么建议吗？

Answer 1

我为你准备了一个小小的JsFiddle：https://jsfiddle.net/v879x7bm/3/

在 HTML ：

中创建容器

<div id="ytContainer"></div>

使用jQuery的JavaScript ：

var yourJsonAsString = '{"videos":[{"title":"bla bla","id":"no3unQcv_vg"},{"title":"blub","id":"3IHrNcJdP8s"},{"title":"abc","id":"-6v-rwoRv_4"}]}';

var ytVideos = JSON.parse(yourJsonAsString);

for (var i in ytVideos.videos) {
  var ytVideo = $("<iframe/>");
  ytVideo.attr({
    width: 560,
    height: 315,
    src: 'https://www.youtube.com/embed/' + ytVideos.videos[i].id,
    frameborder: 0
  });
  $("#ytContainer").append(ytVideo);
}

在这个例子中，我希望你的反序列化对象结构如下所示：

{  
   "videos":[  
      {  
         "title":"bla bla",
         "id":"no3unQcv_vg"
      },
      {  
         "title":"blub",
         "id":"3IHrNcJdP8s"
      },
      {  
         "title":"abc",
         "id":"-6v-rwoRv_4"
      }
   ]
}

但你可以适应你的需要：）

Answer 2

想象一下，您的JSON字符串包含视频网址。这里有一些代码可以使用jQuery。通过更改json_string变量，它会更改哪些视频加载到屏幕上。

<html>
  <div id="content_div"></div>
</html>

<script type="text/javascript">

jQuery(function () {

  var json_string = '{ "vid1" : "www.vid1.url", "vid2" : "www.vid2.url"}';

  //make the string into an object
  var json_object = JSON.parse(json_string);

  //loop through the json_object and add the new video each time through
  for (i in json_object) {
    jQuery("#content_div").append('<p><iframe width="420" height="315" src="' + json_object[i] + '"></iframe></p>');
  }

});

</script>

JSfiddle here showing the code working, but using a <p> tag instead of the iframe.

如何动态创建嵌入页面的多个YouTube视频？

2 个答案: