jquery - 一个带有JQuery的YouTube简单播放按钮

我想要2个简单的按钮来播放和停止YouTube视频。我用jQuery尝试过类似的方法，但不起作用。

谁能帮我提供一个简单干净的解决方案来玩游戏
YouTube视频按钮？

我可以隐藏视频以便
只是听到声音？

http://codepen.io/anon/pen/Carwu
http://jsfiddle.net/8kN6Z/34/

$(function(){

  $("#video").hide();
  $("#escolta").click(function() {
    video.playVideo();
    //$("#video").playVideo();
    //$("#video").trigger('play');
    //$(".player").playVideo()

    });

  $("#pausa").click(function() {
    video.stopVideo();
    //$("#video").trigger('pause');
  });

});

CSS:

#escolta,#pausa{ font-family: Tahoma;letter-spacing:1px;font-size:11px;color: #666;width: 80px;text-align: center;height: 20px;line-height: 20px;background-color: #ccc;cursor: pointer;}
#escolta {position:absolute;top: 20px;left:20px;}
#pausa{position: absolute;top:20px;left: 150px;}
#pausa{position: absolute;top:20px;left: 150px;}
#video{position:absolute;top:100px;left:20px;}

HTML:

<div id="escolta">escolta</div>
<div id="pausa">pausa</div>

<iframe id="video" width="640" height="360" src="http://www.youtube.com/embed/4G1mundpq-Q?rel=0" frameborder="0" allowfullscreen></iframe>

最佳答案

我改过了这个。找出您遇到的一些问题。

看看它在JSFiddle上的工作http://jsfiddle.net/8kN6Z/33/

这是您做错了:

您没有加载Youtube Player API。即使使用iframe，您也必须手动执行。

您没有创建名为onYouTubePlayerAPIReady的函数。

您没有为框架创建YT.Player对象，也没有为该YT.Player对象的onReady事件处理程序设置为onPlayerReady函数。

您没有等到在onPlayerReady回调函数内部将click事件处理程序设置为就绪的YT.Player对象。

您将JSFiddle上的Javascript API设置为Mootools，然后将CSS选择器语法与$('＃id')结合使用。 $$('＃id')适用于mootools，但$('id')是正确的Mootools语法。 $('＃id')是jQuery。

您将JavaScript封装在onLoad方法中。这不起作用。

YouTube播放器API设置和功能定义需要在顶层定义。

最大的问题是iframe标记中缺少type =“text / html”和src脚本参数＆enablejsapi = 1属性。如果没有这些脚本，这些脚本将无法正常工作。

在Codepen上，您使用的是jQuery，因此该解决方案必须进行音译。

我在Mootools上遇到的问题:
$('video')。hide()不起作用。使用display:none创建一个.hideme类，并在onPlayerReady回调函数的末尾调用$('video')。addClass('hideme')即可。

JS Fiddle working example

HTML:

<body>
    <div id="escolta">escolta</div>
    <div id="pausa">pausa</div>
    <iframe id="video" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/4G1mundpq-Q?rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</body>

CSS:

#escolta, #pausa {
    font-family: Tahoma;
    letter-spacing:1px;
    font-size:11px;
    color: #666;
    width: 80px;
    text-align: center;
    height: 20px;
    line-height: 20px;
    background-color: #ccc;
    cursor: pointer;
}
#escolta {
    position:absolute;
    top: 20px;
    left:20px;
}
#pausa {
    position: absolute;
    top:20px;
    left: 150px;
}
#pausa {
    position: absolute;
    top:20px;
    left: 150px;
}
#video {
    position:absolute;
    top:100px;
    left:20px;
}
.hideme {
    display:none;
}

JS:

var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubePlayerAPIReady() {
    new YT.Player('video', {
        events: {
            'onReady': onPlayerReady
        }
    });
}
function onPlayerReady(event) {
    $("escolta").addEvent('click', function () {
        event.target.playVideo();
    });
    $("pausa").addEvent('click', function () {
        event.target.stopVideo();
    });
    $('video').addClass('hideme');
}

jQuery的更新信息如下:

我保存了一个新的经过测试的可工作的jQuery jsfiddle http://jsfiddle.net/8kN6Z/47/

唯一的变化是在javascript部分中通过id选择按钮的两行。其余的javascript使用的是内置于DOM方法中的javascript。

jQuery JS:

var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('video', {
      events: {
        'onReady': onPlayerReady
      }
    });
}
function onPlayerReady(event){
  event.target.playVideo();
    $("#escolta").on('click', function() {
      player.playVideo();
    });
    $("#pausa").on('click', function() {
      player.stopVideo();
    });
  }
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);