Question

我是jQuery和JS的新手。如何使用jQuery正确地重写这些函数？我知道它的标准JS在手动HTML标记上运行良好但我现在还需要浏览页面并找到带有YouTube src的iframe并获取ID，然后使用第一个示例标记重新创建它们。

我完全卡住了。我想我或多或少都有，但不知道现在去哪里。

第一个例子使用我的标记：

<div class="video-container">
   <div class="video-player" data-id="Cv_2mp3X868"></div>
</div>

哪个可以正常工作，但我认为现在我需要预先加载并从iframe中创建相同的标记，嵌入函数应该更好。

尝试：

function createThumb(id) {
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}

function createIframe() {
    var iframe = $("iframe");
    iframe.attr("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
    iframe.attr("frameborder", "0");
    iframe.attr("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}

$(document).ready(function() {

    // build video from default markup
    var defaultVideo = $(".video-player");
    $(defaultVideo).each(function (index, value){
        var p = $('<div></div>');
        p.innerHTML = createThumb(v[n].dataset.id);
        p.onclick = createIframe;
        v[n].appendChild(p);
    });

    // search for social embeds and recreate to our markup
    $('iframe[src*="youtube.com"]').each(function() {
        var loadedVideoURL = $('iframe').attr('src').match(/[^/]*$/)[0];
        console.log(loadedVideoURL);
    }); 

});

Answer 1

我试图清理原生JS和jQuery的混乱组合，并对你的小提琴进行了一些编辑：https://jsfiddle.net/yurt5bb6/2/

默认功能：

(function() {
    $.each($('.video-player'), function() {
        $(this).append(videoThumb($(this).data('id')));
        $(this).on('click', videoIframe);
    });

    $.each($('iframe'), function() {
        // Rebuild the given template
        var player = $('<div class="video-player">');

        // Strip youtube video id for data-id attribute
        var id = $(this).attr('src');
        id = id.substr(id.lastIndexOf("/")+1);
        player.attr('data-id', id);

        player.html(videoThumb(id));
        player.on('click', videoIframe);

        var videoContainer = $('<div class="video-container">');
        videoContainer.append(player);
        $(this).replaceWith(videoContainer);
    });
})();

iframe渲染功能：

function videoIframe() {
    var iframe = $('<iframe>');
    iframe.attr("src", "//www.youtube.com/embed/" + $(this).attr('data-id') + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
    iframe.attr("frameborder", "0");
    iframe.addClass("youtube-iframe");
    $(this).empty();
    $(this).append(iframe);
}

还更改了CSS，为youtube-iframe创建了一个类而不是id。

使用jQuery来预测iframe src并通过函数获取ID和动作

1 个答案: