Question

我点击按钮（.playbutton）后尝试播放嵌入式Youtube视频。

视频嵌入iframe div名为#youtubecontainer。

实现这一目标的最简单方法是追加＆＃39; ?autoplay=1＆＃39;到iframe的{{1}}属性。（我知道有一个API，但是现在我需要这样做。）

我的HTML代码就是这个

src

Javascript代码

<div class="playbutton">
    <img class="playicon">
</div>

<div id="youtubecontainer">
    <iframe width="560" height="315" src="//www.youtube.com/embed/XeoFLxN5520" frameborder="0" allowfullscreen></iframe>
</div>

然而，这会附加＆＃39;？autoplay = 1＆＃39;到src两次，所以它读取如下并失败：

$(function() {
    //This controls YouTube playback via button
    $('.playbutton').click(function() {
        $("#youtubecontainer iframe").attr('src', ($("#youtubecontainer iframe").attr('src') + '?autoplay=1'));
    });
});

任何想法为什么？

Answer 1

尝试在添加之前替换该自动播放。因为当您第二次点击它时，您再次添加?autoplay=1之前仍然存在的内容。

正在使用 DEMO

$("#youtubecontainer iframe").attr('src', $("#youtubecontainer iframe").attr('src').replace(/\?autoplay=1/, "") + '?autoplay=1');

Answer 2

您可以尝试在src事件之前保存iframe的原始click：

var source;
$(function() {
    //This controls YouTube playback via button
    source = $("#youtubecontainer iframe").attr('src');
    $('.playbutton').click(function() {
        $("#youtubecontainer iframe").attr('src', source + '?autoplay=1');
    });
});

工作小提琴：http://jsfiddle.net/robertrozas/notjtz3d/1/

为什么jquery连接两次字符串？

2 个答案: