mediaelement.js에서 "mejs-time-float"요소를 비활성화 할 수 있습니까?

Question

호버에있는 MediaElement 플레이어 위에 나타나는 "mejs-time-float"요소 (여기 5:01 표시)를 비활성화 할 수 있습니까? 당신은 단지 CSS에서 그것을 숨길 그래서

Answer 1

MediaElement에는 CSS를 통해 skinable입니다.

.mejs-time-float{ 
    display: none; 
} 

Answer 2

이미 기본적으로 숨겨져 때 당신이 마우스 오버 span.mejs 시간 (jQuery를 .show()를 사용하여) 표시되어 있기 때문에 단순히이 문제를 해결하지 않습니다 span.mejs 시간 - 플로트 숨기기 - 총 :

total = controls.find('.mejs-time-total') 

...

total 
.bind('mousedown', function (e) { 
    // only handle left clicks 
    if (e.which === 1) { 
     mouseIsDown = true; 
     handleMouseMove(e); 
     $(document) 
      .bind('mousemove.dur', function(e) { 
       handleMouseMove(e); 
      }) 
      .bind('mouseup.dur', function (e) { 
       mouseIsDown = false; 
       timefloat.hide(); 
       $(document).unbind('.dur'); 
      }); 
     return false; 
    } 
}) 
.bind('mouseenter', function(e) { 
    mouseIsOver = true; 
    $(document).bind('mousemove.dur', function(e) { 
     handleMouseMove(e); 
    }); 
    if (!mejs.MediaFeatures.hasTouch) { 
     timefloat.show(); 
    } 
}) 
.bind('mouseleave',function(e) { 
    mouseIsOver = false; 
    if (!mouseIsDown) { 
     $(document).unbind('.dur'); 
     timefloat.hide(); 
    } 
}); 

실제로 'mouseenter'위의 바인딩을 삭제하거나 직접 다음을 다음을 추가하는 것입니다 작은 툴팁 기능을 비활성화 할 수있는 신속하고 더러운 옵션 :

total.unbind('mouseenter'); 

이렇게하면 mouseenter 이벤트가 바인딩 해제됩니다.

하지만 라이브러리를 수정하는 중이므로보기 흉한 일이 있습니다. 라이브러리를 업데이트하면 변경 사항이 모두 사라집니다. 당신이 마우스를 가져 가면 표시되지 않습니다

$('video').mediaelementplayer({ 
... your options ... 
}); 

$('.mejs-time-total').unbind('mouseenter'); 

그리고 지금 작은 도구 설명 : 그것을 할 수있는 더 좋은 방법은 단순히 당신이 MediaElement에 플레이어를 초기화 한 후 바인딩을 해제하는 것입니다.

Answer 3

캡쳐 해제 된 mouseeenter는 호버 (hover) 문제로 작동했지만 일부 브라우저에서는 진행 막대를 클릭 할 때 여전히 시간이 흐른 것으로 나타났습니다.() 가시성을 접촉하지 않는 나는이 이상적이라고 생각하지 않는다, 그러나 그것은의 jQuery .show 때문에, 작동 :

.mejs-time-float { 
    visibility: hidden; 
} 

Answer 4

이하는 설정 "디스플레이 : 없음"도움하지 않습니다,하지만 당신이 사용하는 경우 "! 중요한 것 "은 jQuery에 의해 추가 된 인라인 스타일을 무시할 것이기 때문에 잘 작동하는 것으로 보인다.

.mejs-time-float { 
    display: none !important; 
}