Question

这是我的主页：

这是我的代码：

            // Detecting IE more effectively : http://msdn.microsoft.com/en-us/library/ms537509.aspx
        function getInternetExplorerVersion() {
            // Returns the version of Internet Explorer or -1 (other browser)
            var rv = -1; // Return value assumes failure.
            if (navigator.appName == 'Microsoft Internet Explorer') {
                var ua = navigator.userAgent;
                var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
                if (re.exec(ua) != null)
                    rv = parseFloat(RegExp.$1);
            };
            return rv;
        };

        // set some general variables
        var $video_player, _videoHref, _videoPoster, _videoWidth, _videoHeight, _dataCaption, _player, _isPlaying = false, _verIE = getInternetExplorerVersion();
        jQuery(document).ready(function ($) {  
            jQuery(".fancy_video")
            .fancybox({
                // set type of content (remember, we are building the HTML5 <video> tag as content)
                type       : "html",
                // other API options
                scrolling  : "no",
                padding    : 0,
                nextEffect : "fade",
                prevEffect : "fade",
                nextSpeed  : 0,
                prevSpeed  : 0,
                fitToView  : false,
                autoSize   : false,
                modal      : true, // hide default close and navigation buttons
                helpers    : {
                    title  : {
                        type : "over"
                    },
                    buttons: {} // use buttons helpers so navigation button won't overlap video controls
                },
                beforeLoad : function () {
                    // if video is playing and we navigate to next/prev element of a fancyBox gallery
                    // safely remove Flash objects in IE
                    if (_isPlaying && (_verIE > -1)) {
                        // video is playing AND we are using IE
                        _verIE < 9.0 ? _player.remove() : $video_player.remove(); // remove player instance for IE
                        _isPlaying = false; // reinitialize flag
                    };
                    // build the HTML5 video structure for fancyBox content with specific parameters
                    _videoHref   = 'http://jobrangers.com/JobrangersHD.mp4';
                    // validates if data values were passed otherwise set defaults
                    _videoPoster = typeof this.element.data("poster")  !== "undefined" ? this.element.data("poster")  :  "";
                    _videoWidth  = typeof this.element.data("width")   !== "undefined" ? this.element.data("width")   : 360;
                    _videoHeight = typeof this.element.data("height")  !== "undefined" ? this.element.data("height")  : 360;
                    _dataCaption = typeof this.element.data("caption") !== "undefined" ? this.element.data("caption") :  "";
                    // construct fancyBox title (optional)
                    this.title = _dataCaption ? _dataCaption : (this.title ? this.title : "");
                    // set fancyBox content and pass parameters
                    this.content = "<video id='video_player' src='" + _videoHref + "'  poster='" + _videoPoster + "' width='" + _videoWidth + "' height='" + _videoHeight + "'  controls='controls' preload='none' ></video>";
                    // set fancyBox dimensions
                    this.width = _videoWidth;
                    this.height = _videoHeight;
                },
                afterShow : function () {
                    // initialize MEJS player
                    var $video_player = new MediaElementPlayer('#video_player', {
                            defaultVideoWidth : this.width,
                            defaultVideoHeight : this.height,
                            success : function (mediaElement, domObject) {
                                _player = mediaElement; // override the "mediaElement" instance to be used outside the success setting
                                _player.load(); // fixes webkit firing any method before player is ready
                                _player.play(); // autoplay video (optional)
                                _player.addEventListener('playing', function () {
                                    _isPlaying = true;
                                }, false);
                            } // success
                        });
                },
                beforeClose : function () {
                    // if video is playing and we close fancyBox
                    // safely remove Flash objects in IE
                    if (_isPlaying && (_verIE > -1)) {
                        // video is playing AND we are using IE
                        _verIE < 9.0 ? _player.remove() : $video_player.remove(); // remove player instance for IE
                        _isPlaying = false; // reinitialize flag
                    };
                }
            }); 
        }); // ready

出于某种原因，控件没有显示在我的实现上。我复制了以下的实现：here

我认为它可能与控件元素的不透明度有关？

任何帮助都会受到极大的赞赏。

Answer 1

你包含了像这样的fancybox按钮css文件

<link type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-buttons.css" media="screen"/>

...但是您错过了rel="stylesheet"属性，这是必需的，否则您的页面中会包含链接，样式表不会加载，所以

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-buttons.css" media="screen"/>

编辑：

我也注意到你有这个css规则：

http://jobrangers.com/newtemplate/flatone-default/css/style.css
Line 173
.top {
  background-color: rgba(0, 50, 73, 0.7);
  height: 600px;
  top: 0;
  width: 100%;
  z-index: -1;
}

与fancybox按钮冲突＆＃39;规则

#fancybox-buttons.top {
  top: 10px;
}

在这种情况下，fancybox按钮继承height: 600px; css属性，因为它共享类.top，因此它与下面的视频重叠，使其控件无法访问。

您可能需要在之后设置一个额外的css声明加载fancybox按钮css文件来修复它：

#fancybox-buttons.top { background: none repeat scroll 0 0 transparent; height: 32px; top: 10px; }

同时通知，当您启用modal: true时，escape按钮以及默认close和navigation按钮将被禁用。检查fancybox documentation以获取进一步的参考。

MediaElement和fancybox没有控制按钮

1 个答案: