如何使用 jquery 在 html 中显示视频？答案

【问题标题】：How to display video in html using jquery?如何使用 jquery 在 html 中显示视频？
【发布时间】：2014-04-30 14:58:20
【问题描述】：

我从 Json 数据中获取视频网址为 http://www.youtube.com/watch?v=UVKsd8z6scw 但如何使用 jquery 在 iframe 中显示此视频网址？它没有显示任何东西。如果我打开这个 youtube 页面并将其嵌入，那么我将获得链接为 //www.youtube.com/embed/UVKsd8z6scw 。如何解决这个问题？

    //jquery
$(document).ready(function(){
    $.getJSON("http://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",function(data){
        alert(JSON.stringify(data));

        var content='';

        $.each(data,function(index,item){
            content +='<div class="userdata">';

            content +='<div class="userurl">'+item.keywords+'</div>';
            content +='<iframe class="usevideourl" src="'+item.videourl+'"></iframe>';
            content +='<img src="'+item.thumb+'" class="userimage"></img>';
            content +='</div>';
        });
        $('#dictionary').append(content);
    });   
});

【问题讨论】：

你需要调用 $('#SomeClass').append()
是的，您放入内容中的 html 是如何实际添加到 DOM 中的？
解决什么问题？您已从 YouTube 获得嵌入 URL。使用它。

标签： javascript jquery html

【解决方案1】：

要解决这个问题，您必须确实翻译您的 Youtube 网址。
据我了解，您的 JSON youtube 地址是“http://www.youtube.com/watch?v=UVKsd8z6scw”。
因此，您必须将其转换为： "//www.youtube.com/embed/UVKsd8z6scw"

这是一个简单的JS函数：

 function transformUrl(url)
  {
       var i         = url.indexOf("=");
       var videoID   = url.substr(i+1,url.length);

      return ("//www.youtube.com/embed/"+videoID);
  }

所以替换这个：

content +='<iframe class="usevideourl" src="'+item.videourl+'"></iframe>';

通过这个：

content +='<iframe class="usevideourl" src="'+transformUrl(item.videourl)+'"></iframe>';

请使用您的示例在下面找到一个 JS 小提琴
LIVE DEMO HERE : JSFIDDLE http://jsfiddle.net/mjarro/5KjEW/

【讨论】：

【解决方案2】：

您需要以某种方式将您的 js 标记附加到 DOM。

例如：

HTML：

<div class="video"></div>

JavaScript：

var data = {
'keywords': 'keywords',
    'videourl': 'www.youtube.com',
    'thumb': 'mythumb.jpg'
}
var content = '';

$.each(data, function (index, item) {
    content += '<div class="userurl">' + item.keywords + '</div>';
    content += '<iframe class="usevideourl" src="' + item.videourl + '"></iframe>';
    content += '<img src="' + item.thumb + '" class="userimage"></img>';
    content += '</div>';
});

$('.video').append(content);

或者，您可以动态创建容器，然后在循环中追加所有内容。

【讨论】：