在用户点击时通过 jQuery 加载 YouTube 视频的最有效方法是什么？

发布于 2024-11-14 10:30:45 字数 1235 浏览 0 评论 0原文

我正在尝试确定使用 jQuery 在用户单击时将视频加载到视频中的最有效方法是什么。

为了提供更多背景信息，我将在 YouTube 上制作大约 30 个剪辑，每个剪辑的时长为 30-60 秒，我希望在用户浏览主题时将它们动态加载到页面右侧的 div 中，并且左侧可能有视频剪辑。

现在，我已经设置了 HTML 和 jQuery。它有效，但我很好奇是否有更好的方法：

<div class="wrapper">
    <div class="details_left">
        <div class="cluster">
            <a href="#" id="johnk" class="vid_trigger"><div class="title">The importance of demonstrating intellectual curiosity</div></a>
            <div class="role">John K: Summer Consultant, BCG</div>
            <div class="summary">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
        </div>
    </div>
    <div class="details_right" id="video_container">
        video
    </div>   
</div>

和 jQuery：

$('#johnk').click( function(){
    $('#video_container').html('<iframe width="425" height="349" src="http://www.youtube.com/embed/bMvRdr-mUOU?rel=0" frameborder="0" allowfullscreen </iframe>');
})

为了减少每个视频的 .click() 手动编码，我正在考虑创建一个具有 ids-> 的关联数组。嵌入代码。有没有更好的方法来更有效地完成相同的功能？

预先感谢您的任何见解！

原文

I'm trying to determine what is the most efficient way to load videos into a on a user click using jQuery.

To give more context behind this, I'll have about 30 clips on YouTube that are each between 30-60seconds and I'd like to dynamically load them into a div on the right hand side of the page as the user browses the topics and potential video clips on the left hand side.

Right now, I've setup this HTML and jQuery. It works but I'm curious if there is a better method:

<div class="wrapper">
    <div class="details_left">
        <div class="cluster">
            <a href="#" id="johnk" class="vid_trigger"><div class="title">The importance of demonstrating intellectual curiosity</div></a>
            <div class="role">John K: Summer Consultant, BCG</div>
            <div class="summary">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
        </div>
    </div>
    <div class="details_right" id="video_container">
        video
    </div>   
</div>

And the jQuery:

$('#johnk').click( function(){
    $('#video_container').html('<iframe width="425" height="349" src="http://www.youtube.com/embed/bMvRdr-mUOU?rel=0" frameborder="0" allowfullscreen </iframe>');
})

To reduce hand coding a .click() for each video I am considering creating an associative array that has the ids-> embed code. Is there a better way to accomplish the same functionality more efficiently?

Thanks in advance for any insights!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

剑心龙吟 2024-11-21 10:30:45

您可以将 URL 添加到您的 Href 并在调用中获取它，例如：

在您的 HTML 中：

<a href="bMvRdr-mUOU" id="johnk" class="vid_trigger">

现在在您的 JQuery 中：

$('.vid_trigger').click( function(e){
e.preventDefault();
var URL = $(this).attr('href');
var htm = '<iframe width="425" height="349" src="http://www.youtube.com/embed/' + URL + '?rel=0" frameborder="0" allowfullscreen ></iframe>';

    $('#video_container').html(htm);

return false;
});

you can add the URL to your Href and get it in the call Something Like:

In your HTML:

<a href="bMvRdr-mUOU" id="johnk" class="vid_trigger">

Now in your JQuery:

$('.vid_trigger').click( function(e){
e.preventDefault();
var URL = $(this).attr('href');
var htm = '<iframe width="425" height="349" src="http://www.youtube.com/embed/' + URL + '?rel=0" frameborder="0" allowfullscreen ></iframe>';

    $('#video_container').html(htm);

return false;
});

回复收藏 0 原文

油焖大侠 2024-11-21 10:30:45

您还可以尝试让 jQuery 更改 iframe src 属性。

您可能会在使用 Internet Explorer 中的 iframe 时遇到问题。
此页面描述了该问题：http://osdir.com/ml /youtube-api-gdata/2011-03/msg00369.html
如果您可以放入条件脚本，在 Internet Explorer 中使用 Flash 嵌入而不是 iframe，那么这可能是最好的方法。

回复收藏 0 原文