仅当鼠标悬停时显示控制栏 - Jwplayer 7.1.1
Display controlbar only when mouseover - Jwplayer 7.1.1
我只想在鼠标悬停事件上显示控制栏。我能够使用这样的东西在 Jwplayer 7.0.3 中实现这一点:
var controlbarDiv = playerFrame.querySelectorAll('.jw-controls .jw-controlbar');
playerFrame.onmouseout = function () {
playerFrame.className += ' ' + 'jw-flag-user-inactive';
}
controlbarDiv[0].onmouseover = function() {
playerFrame.classList.remove('jw-flag-user-inactive');
}
播放器 (playerFrame) 有自己的鼠标悬停以移除用户不活动 class,但现在,在 7.1.1 中,不会触发鼠标悬停事件。如果我将它添加到我的 playerFrame,它会表现得很奇怪,但仍然不会显示控制栏。有什么改变可能导致这种情况的想法吗?
谢谢。
LE:我添加了这些行
playerFrame.onmouseout = function() {
if (!playerFrame.classList.contains('jw-flag-user-inactive')) {
playerFrame.className += ' ' + 'jw-flag-user-inactive';
}
}
playerFrame.onmouseover = function() {
if (playerFrame.classList.contains('jw-flag-user-inactive')) {
playerFrame.classList.remove('jw-flag-user-inactive');
}
}
这适用于 Chrome 和 Safari,但不适用于 Firefox。在 Firefox 中,如果我快速移出并再次移入,我的鼠标悬停事件不会触发。但是,如果我在事件之间留出 2-3 秒,则会触发鼠标悬停事件。似乎只有在悬停控制栏时才会触发 Firefox 中的鼠标悬停事件。
虽然更新没有提供合理的解决方案,但我们必须让它发挥作用。
所以,我这样做了:
var targetId = 'player';
$jwplayer(targetId).onReady(function(){
this.onPlay(callbackOnPlay);
});
var callbackOnPlay = function(){
var player = $('#' + targetId),
controlbar = (player.length) ? player.find('.jw-controls') : $('.jw-controls');
player.onPlay()
if (player.length && controlbar.length) {
//Delay 2s
setTimeout(function() {
controlbar.fadeOut();
}, 2000);
//Add hover event
player.hover(
function() {
controlbar.fadeIn();
}, function() {
controlbar.fadeOut();
}
);
}
};
我只想在鼠标悬停事件上显示控制栏。我能够使用这样的东西在 Jwplayer 7.0.3 中实现这一点:
var controlbarDiv = playerFrame.querySelectorAll('.jw-controls .jw-controlbar');
playerFrame.onmouseout = function () {
playerFrame.className += ' ' + 'jw-flag-user-inactive';
}
controlbarDiv[0].onmouseover = function() {
playerFrame.classList.remove('jw-flag-user-inactive');
}
播放器 (playerFrame) 有自己的鼠标悬停以移除用户不活动 class,但现在,在 7.1.1 中,不会触发鼠标悬停事件。如果我将它添加到我的 playerFrame,它会表现得很奇怪,但仍然不会显示控制栏。有什么改变可能导致这种情况的想法吗?
谢谢。
LE:我添加了这些行
playerFrame.onmouseout = function() {
if (!playerFrame.classList.contains('jw-flag-user-inactive')) {
playerFrame.className += ' ' + 'jw-flag-user-inactive';
}
}
playerFrame.onmouseover = function() {
if (playerFrame.classList.contains('jw-flag-user-inactive')) {
playerFrame.classList.remove('jw-flag-user-inactive');
}
}
这适用于 Chrome 和 Safari,但不适用于 Firefox。在 Firefox 中,如果我快速移出并再次移入,我的鼠标悬停事件不会触发。但是,如果我在事件之间留出 2-3 秒,则会触发鼠标悬停事件。似乎只有在悬停控制栏时才会触发 Firefox 中的鼠标悬停事件。
虽然更新没有提供合理的解决方案,但我们必须让它发挥作用。
所以,我这样做了:
var targetId = 'player';
$jwplayer(targetId).onReady(function(){
this.onPlay(callbackOnPlay);
});
var callbackOnPlay = function(){
var player = $('#' + targetId),
controlbar = (player.length) ? player.find('.jw-controls') : $('.jw-controls');
player.onPlay()
if (player.length && controlbar.length) {
//Delay 2s
setTimeout(function() {
controlbar.fadeOut();
}, 2000);
//Add hover event
player.hover(
function() {
controlbar.fadeIn();
}, function() {
controlbar.fadeOut();
}
);
}
};