使用 javascript 或 jquery 暂停 youtube 视频答案

【问题标题】：Pause youtube video using javascript or jquery使用 javascript 或 jquery 暂停 youtube 视频
【发布时间】：2013-11-20 03:21:06
【问题描述】：

我需要使用 jQuery 或 javascript 暂停 youtube 视频

我的 js 代码

var class_name = $('#videobuttonChange').attr('class').split(' ')[1];
if (class_name == "play") {
    $("#vid_url").html('<iframe width="100%" height="270px" id="v_frame" src="http://www.youtube.com/v/uPiVOofEPHM?version=3&f=playlists&c=youtube_it&app=youtube_gdata&autoplay=1" frameborder="0" allowfullscreen wmode="Opaque"></iframe>');
} else {
    $("#vid_url").html('<iframe width="100%" height="270px" id="v_frame" src="http://www.youtube.com/v/uPiVOofEPHM?version=3&f=playlists&c=youtube_it&app=youtube_gdata" frameborder="0" allowfullscreen wmode="Opaque"></iframe>');
}

在其他情况下，我需要暂停视频，但我的代码充当停止视频的角色。如何暂停视频。

任何人都可以指导我。

【问题讨论】：

一个注意事项：你最好使用 jQuery 的 $.hasClass() 方法来测试一个类的存在，而不是编写代码时期望“play”总是元素的 .className 属性中列出的第二个类。此代码不太灵活，以后无法更改。

标签： javascript jquery html iframe youtube

【解决方案1】：

$('iframe').each(function(i,e){
    let iframeSrc = $(e).attr('src');
    $(e).attr('src',iframeSrc);
});

这将为所有视频重置 src，您可以将其修改为仅定位一个

【讨论】：

【解决方案2】：

您可以使用YouTube JavaScript Player API

<body>
<div id="videobuttonChange" class="play"></div>
<div id="vid_url"></div>

<script src="http://www.youtube.com/iframe_api"></script>

<script>
    var player;

function onYouTubePlayerAPIReady() {   //create iframe in #vid_url   
    player = new YT.Player('vid_url', {
        height: '270px',
        width: '100%',
        videoId: 'uPiVOofEPHM'
    });

    setTimeout(function () { //as it is asynchronous  
        if ($('#videobuttonChange').hasClass("play")) {
            player.playVideo();
        } else {
            player.pauseVideo();
        }
    }, 2000);

}
</script>

小提琴http://jsfiddle.net/code_snips/gNF6q/

【讨论】：

【解决方案3】：

您可以尝试在将 iframe 附加到 DOM 之前有条件地配置它：

var video = $('<iframe></iframe>');
    video.attr({'width': '100%',
                'height': '270px',
                'id': 'v_frame',
                'src': 'http://www.youtube.com/v/uPiVOofEPHM?version=3&f=playlists&c=youtube_it&app=youtube_gdata',
                'frameborder': '0',
                'allowfullscreen': '',
                'wmode': 'Opaque'});

if($('#videobuttonChange').hasClass('play')) {
   video.attr('src', video.attr('src') + '&autoplay=1');
}
video.appendTo($("#vid_url"));

【讨论】：

不使用拆分来获取类名是可以的，但我需要暂停视频。你的代码是暂停视频吗？