У меня возникла проблема со встроенным проигрывателем YouTube, нарушающим работу других прослушивателей событий на моей странице. Я специально использую API-интерфейс Iframe, потому что мне нужен проигрыватель html5, и обычно мне нужна функциональность, чтобы он был встроен в перетаскиваемое диалоговое окно.
/*DRAGGING*****************************************/
//get offset and set dragging
header.onmousedown = preDrag;
document.onmouseup = function(e){
dragging = false;
};
//drag
document.onmousemove = drag;
ytplayer.onmousemove = drag;
function preDrag(){
offsetX = container.style.left - mouseX;
offsetY = container.style.top - mouseY;
//alert('left: ' + container.style.left +', top: ' + container.style.top);
//alert('offsetX: ' + offsetX + ', offsetY: ' + offsetY);
dragging = true;
}
function drag(){
if (dragging == true){
container.style.top = (mouseY + offsetY)+"px";
container.style.left = (mouseX + offsetX)+"px";
}
}
});
</script>
</head>
<body>
<p id="text"></p>
<div id="vidContainer">
<div id="vidHeader"></div>
<div id="vidPlayer"><div id='yt'></div></div>
<div id="vidPlaylist">
<ul id="videos">
</ul>
</div>
</div>
<!-- <a id="add" href="#" class="btn">Add to the playlist!</a> -->
<script>
/*YOUTUBE PLAYER API*************/
var player;
function onYouTubeIframeAPIReady(){
player = new YT.Player('yt', {
height: '390',
width : '640',
videoId: 'i3Jv9fNPjgk',
playerVars: {
"html5" : 1,
"enablejsapi" : 1,
},
events: {
'onReady' : onPlayerReady,
'onStateChange' : onPlayerStateChange,
}
});
}
function onPlayerReady(event){
event.target.playVideo();
}
function onPlayerStateChange(event){
}
function stopVideo(){
player.stopVideo();
}
function someFunc(){
alert('oh hey the first time!!!');
}
/*******************************/
</script>
</body>
This code will allow for the user to click on the header (above the video) and drag it around, which moves the whole container. The problem is that if the user moves the mouse quickly there is a possibility that the mouse will move into the region occupied by the youtube video, which stops the dragging function. That means that document.onmousemove is not getting activated, hence why I think that the youtube player is cancelling the document events.
Я пробовал 2 решения для этого:
создайте div-оболочку для проигрывателя YouTube и прикрепите к нему прослушиватели событий: это был
ytplayer.onmousemove = drag, и он полностью терпит неудачу.прикрепите прослушиватели событий к объекту видеопроигрывателя YouTube в
events: { "onmouseover": "someFunc" }но это тоже не удается.
У меня нет идей, и я не знаю, что делать. Кто-нибудь может помочь?
