如何讓視頻控件在Firefox中顯示？

當我將視頻控制欄懸停在Chrome中時，Safari會顯示出來。但是，當我把它放在Firefox中時，它沒有顯示。我不知道我的js代碼是否不支持firefox。但是當我在Firefox中檢查它時，控件不斷出現並消失。以下是我的代碼。誰能幫我這個？謝謝。如何讓視頻控件在Firefox中顯示？

HTML

 <video poster="http://dummyimage.com/320x205/852285/fff" preload="auto"> 

      <source type="video/mp4" src="http://www.w3schools.com/html/movie.mp4" /> 
     </video>

 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
     <script src='http://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.1/js/mediaelement.js'></script> 

// Video Player 
    function videoPlayer() { 
     // Exit full screen when video is done playing 
     var video = document.getElementsByTagName("video")[0]; 
     video.addEventListener("ended", function(e) { 
      video.webkitExitFullScreen() 
     }); 

    var player = $('.video-player'), 
    controls = player.find('.vid-play-btn-wrap'), 
    wrapper = player.find('video'), 
    video = player.find('video').get(0), 

    isPlaying = false, 
    settings = {}, 
    media = new MediaElement(video, settings), 
    $media = $(media); 

    $media.on('play', _playHandler); 
    $media.on('pause', _pauseHandler); 
    $media.on('ended', _endedHandler); 

    player.click(_togglePlayPause); 
    player.hover(_mouseOverHandler, _mouseOutHandler); 

    function _togglePlayPause() { 
     isPlaying ? media.pause() : media.play(); 
    } 

    function _mouseOverHandler() { 
     if(!isPlaying) { return; } 
     // controls.fadeIn('fast'); 
    } 

    function _mouseOutHandler() { 
     if(!isPlaying) { return; } 
     // controls.fadeOut('fast'); 
    } 

    function _endedHandler() { 
     isPlaying = false; 
     video.load(); 
     controls.show(); 
    } 

    function _playHandler() { 
     isPlaying = true; 
     controls.hide(); 
    } 

    function _pauseHandler() { 
     isPlaying = false; 
    } 

    $('video').hover(function toggleControls() { 
     if (this.hasAttribute("controls")) { 
      this.removeAttribute("controls") 
     } else { 
      this.setAttribute("controls", "controls") 
     } 
    }); 
}

來源

2015-12-07 waisie li

遇到同樣的問題，您是否找到了解決方案？（這些控件最終會顯示出來，而且時間也不會相同） –

你有這樣的腳本：

player.hover(_mouseOverHandler, _mouseOutHandler);

所以無論功能上懸停執行（這也解釋了出現和消失）。在if/else語句中創建一個包含所需內容的ONE函數可能會更好

來源

2015-12-07 22:10:07 Johannes

但我想懸停以顯示控件。對於鉻和Safari瀏覽器的作品。但懸停時，Firefox不起作用。 –

讓我知道如何解決這個問題？因此，如果我將鼠標懸停在視頻上，控件將顯示在Firefox中。謝謝。 –

如何讓視頻控件在Firefox中顯示？

回答

相關問題