Nrc*_*Nrc 3 youtube jquery youtube-api
我想要2个简单的按钮来播放和停止YouTube视频.我用jQuery尝试过这样的东西并不起作用.
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.
你在onLoad方法中包装了javascript.哪个不起作用.
需要在顶级定义YouTube Player API设置和功能定义.
最大的问题是iframe标记中缺少type ="text/html"和src脚本参数&enablejsapi = 1属性.没有那些脚本工作.
在Codepen上,您使用的是jQuery,因此必须对此解决方案进行音译.
与Mootools遇到的问题:$('video').hide()不起作用.使用display:none创建一个.hideme类并调用$('video').onPlayerReady回调函数末尾的addClass('hideme')工作得很好.
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);