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语句中创建包含所需内容的ONE函数

如何让视频控件显示在Firefox中？

1 个答案: