javascript - 如何使视频控件显示在 Firefox 中？

Question

当我将视频控制栏悬停在 Chrome 中时，Safari 就会显示出来。但是当我将它悬停在 Firefox 中时，它没有显示。不知道是不是我的js代码不支持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>

JS

        <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")
        }
    });
}

Answer 1

你的脚本中有这个:

player.hover(_mouseOverHandler, _mouseOutHandler);

所以这两个函数都是在悬停时执行的(这解释了出现和消失)。最好创建一个包含 if/else 语句中所需内容的函数