Pause youtube video using javascript or jquery

问题

I need to pause the youtube video using jQuery or javascript

my code in 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>');
}

In else condition i need to pause the video but my code act as stopped the video. How to pause the video.

Anyone guide me.

回答1:

You could try conditionally configuring the iframe before appending it to the 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"));

回答2:

You can use 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>

Fiddle http://jsfiddle.net/code_snips/gNF6q/

来源：https://stackoverflow.com/questions/19853580/pause-youtube-video-using-javascript-or-jquery

标签

javascript

jquery

html

iframe

youtube