Question

我很难将JavaScript数据传递给HTML。我可以将视频数据发送到iframe，以便搜索检索嵌入视频列表。或者我可以设置我的html var等于href并显示一个书面的视频列表，其网址链接重定向到YouTube本身。我想结合这些想法。

我的目标是显示带有缩略图的视频节目的书面列表。点击链接后，视频应嵌入当前页面。

确切的问题是我希望onclick功能启动playVid功能，传递视频ID数据，并将其发送到iframe。它没有。我得到未捕获的引用错误playVid未定义。这是怎么回事？

更新： 1）试图在showResults之前放入playVid。但仍未定义。

2）更改onclick =“playVid（value.id.videoId）”＆gt; to onclick =“playVid（'+ value.id.videoId +'）”＆gt;但仍未定义。

3）这是根据您的建议更新的代码。它在中途。有些东西被传递给iframe并且嵌入了视频帧。 playVid现在定义没有问题。问题不是数据源。它在我们尝试嵌入之前完美地工作。我现在将发布我的错误图片，现在是关于chrome扩展的，这很奇怪。

4）我通过安装Google Cast chrome扩展程序解决了我收到的Chrome错误。显然，除非您下载扩展程序，否则Chrome有时会在嵌入的YouTube视频中出错，即使扩展程序与嵌入式视频无关。

5）最后一个包版似乎是YouTube错误“errorCode”：“api.invalidparam”

解

function showResults(results) {
    var html = '';
    $.each(results, function(index,value) {
    html += '<li><a href="https://www.youtube.com/embed/' +   value.id.videoId + '"><img src="'  +value.snippet.thumbnails.medium.url +  '">' + value.snippet.title + '</a>)</li>';        });
    $('#results').html(html);
    $('#results li a').click(function(e){
    playVid($(this).attr('href'));
});
}
function playVid(vidID) {
var embedVid = vidID+'?autoplay=1';
document.getElementById('player').src = embedVid;
}

Answer 1

您可能需要在点击时将整个iframe代码写入文档，而不是仅仅更改现有iframe的来源。首先创建一个外部div @ 800x440以包含iframe，然后设置

outer.innerHTML = '<iframe SRC="' + embedVid + '"></iframe>'

Answer 2

试试这个：

1-删除此onclick =＆＃34; playVid（value.id.videoId）＆＃34;来自showResults函数并用赋值id替换它：

 html += '<li><a href="#" id="'+value.id.videoId+'"><img src="' + value.snippet.thumbnails.medium.url +  '">' + value.snippet.title + '</a>)</li>';

2-在每个循环之后添加：

$('#results').html(html);
$('#results li a').click(function(){
   playVid($(this).attr('id'));
});

Answer 3

您的问题可能出在这条线上......

html += '<li><a href="#" onclick="playVid(value.id.videoId)"><img src="' + value.snippet.thumbnails.medium.url +  '">' + value.snippet.title + '</a>)</li>';

试试这个......

html += '<li><a href="#" onclick="playVid(' + value.id.videoId + ')"><img src="' + value.snippet.thumbnails.medium.url +  '">' + value.snippet.title + '</a>)</li>';

还尝试将playVid（）函数移到此... $(function(){

之外

如何以两种不同的方式将相同的JavaScript数据传递给HTML？

3 个答案: