全屏上的Ipad损失了css风格

时间:2014-04-16 11:18:29

标签: jquery css ipad

我已经定制了带有控制栏的HTML5播放器,用于输入评论,使用jquery创建的书签。 它在全屏显示时在窗口中工作正常,但在全屏Ipad的情况下控制条不可见。 我想在全屏幕上阻止Ipad原生播放器并播放我自定义的HTML5播放器。 我的脚本如下 -

function OsBrowserDetection(referrer) {
var OSName = "Unknown OS";
if (navigator.appVersion.indexOf("Win") != -1) OSName = "Windows";
if (navigator.appVersion.indexOf("Mac") != -1) OSName = "Mac";
if (navigator.appVersion.indexOf("X11") != -1) OSName = "Unix";
if (navigator.appVersion.indexOf("Linux") != -1) OSName = "Linux";
var BrowserName = mejs.MediaFeatures.isFirefox ? "Firefox" : mejs.MediaFeatures.isChrome ? "Chrome" : mejs.MediaFeatures.isIE ? "IE" : mejs.MediaFeatures.isWebkit ? "Safari" : "IE";
var isTabletOrPhone = (mejs.MediaFeatures.isAndroid || mejs.MediaFeatures.isiOS);
var BrowserVersion = 0
if (BrowserName == "Firefox") {
    BrowserVersion = ($.browser.version < 21.0) ? "20-" : "21+";
}
if (!isTabletOrPhone) {
    checkPlayerExceptionMatrixAndInvokePlayer(BrowserName, BrowserVersion, OSName,referrer);
}
else {
    invokePlayer(DefaultPlayer);
}
}

function invokePlayer(playerName) {
if (playerName == "Silverlight") {
        $("#divSilverlightPlayer").show();
    $("#HTMLPlayer").hide();
    $("#HTMLPlayer").html("<div></div>");
}
else {
    $("#divSilverlightPlayer").hide();
    $("#divSilverlightPlayer").html("<div></div>");
    $("#HTMLPlayer").show();
    invokeHTMLPlayer();
}
}



function FullScreenClassChange() {
$('#Content').removeClass('maxcontent');
$('#Content').addClass('content');
$('#top_row_right_contents, #top_row_right_bookmarks, #top_row_right_search,    #media_icon_description, #media_icon_Transcript, #media_icon_TagCloud, #media_icon_RelatedVideos, #media_icon_UserCmnts').removeClass('top_row_right_divs');
$('#top_row_right_contents, #top_row_right_bookmarks, #top_row_right_search, #media_icon_description, #media_icon_Transcript, #media_icon_TagCloud, #media_icon_RelatedVideos, #media_icon_UserCmnts').addClass('top_row_right_divs_left'); ;
$('.top_row_right_divs_left').height($('#myVideo').height() - '10' + 'px');
$('#inner_content, #inner_bookmark,#inner_search,#inner_description,#inner_Transcript,#inner_TagCloud,#inner_RelatedVideos,#inner_UserCmnts').height($('#myVideo').height() - '40' + 'px');
$('.commentDiv').height('66%');
$('.usercmtspopup').height('70%');
$('.popupComments').height('55%');
$('#top_row_right').appendTo('#top_row');
$('#top_row_media_div').appendTo('#container');
$('#top_row_right_contents, #top_row_right_bookmarks, #top_row_right_search,         #media_icon_description, #media_icon_Transcript, #media_icon_TagCloud, #media_icon_RelatedVideos, #media_icon_UserCmnts').appendTo('#player_outer');
$('#top_row_right').removeClass('top_row_right_fullscreen');
$('#top_row_media_div').removeClass('top_row_media_div_fullscreen');
$('#top_row_right').show();
}

var chckfullscreen = '';
var ua = navigator.userAgent,event = (ua.match(/iPad/i)) ? "touchstart" : "click";
$('.mejs-fullscreen-button').live(event, function () {
chckfullscreen = $('.mejs-fullscreen-button').attr('class');
if (chckfullscreen == "mejs-button mejs-fullscreen-button mejs-fullscreen") {
    $('#Content').removeClass('maxcontent');
    FullScreenClassChange();
}
else if (chckfullscreen == "mejs-button mejs-fullscreen-button mejs-unfullscreen") {
    windowheight = screen.height - '60' + 'px';
    innerheight = screen.height - '100' + 'px';
    $('#top_row_right').appendTo('.mejs-inner');
    $('#top_row_right_contents, #top_row_right_bookmarks, #top_row_right_search, #media_icon_description, #media_icon_Transcript, #media_icon_TagCloud, #media_icon_RelatedVideos, #media_icon_UserCmnts,#top_row_media_div').appendTo('.mejs-inner');
    $('#top_row_right').hide();
    $('#Content').removeClass('content');
    $('#Content').addClass('maxcontent');
    $('#top_row_right_contents, #top_row_right_bookmarks, #top_row_right_search,       #media_icon_description, #media_icon_Transcript, #media_icon_TagCloud, #media_icon_RelatedVideos, #media_icon_UserCmnts').height(windowheight);
    $('#inner_content, #inner_bookmark,#inner_search,#inner_description,#inner_Transcript,#inner_TagCloud,#inner_RelatedVideos,#inner_UserCmnts').height(innerheight);
    $('.commentDiv').height(screen.height - '300' + 'px');
    $('.usercmtspopup').height(windowheight);
    $('.popupComments').height(screen.height - '300' + 'px');
    $('#top_row_right_contents, #top_row_right_bookmarks, #top_row_right_search, #media_icon_description, #media_icon_Transcript, #media_icon_TagCloud, #media_icon_RelatedVideos, #media_icon_UserCmnts').removeClass('top_row_right_divs_left');
    $('#top_row_right_contents, #top_row_right_bookmarks, #top_row_right_search, #media_icon_description, #media_icon_Transcript, #media_icon_TagCloud, #media_icon_RelatedVideos, #media_icon_UserCmnts').addClass('top_row_right_divs'); ;
    $('#top_row_right').addClass('top_row_right_fullscreen');
    $('#top_row_media_div').addClass('top_row_media_div_fullscreen');
    $('#top_row').show();
    $('#top_row_right').show();
    $('#txtInnerSearch,#txtBookmarks,#txtUserName,#txtComment').click(function (e) {
        if (chckfullscreen == "mejs-button mejs-fullscreen-button mejs-unfullscreen") {
            if (this.id == "txtBookmarks") {
                myPlayer[0].player.pause();
            }
            $('.mejs-fullscreen-button').trigger('click');
            $('#' + this.id).focus();
            e.preventDefault();
        }
    });

    $('.maxcontent').mouseover(function () {
        $('#top_row_right').show();
    });
}
});

非常感谢任何形式的帮助.. 我跟着http://www.brightec.co.uk/blog/jquery-click-events-ipad解决了全屏问题,但仍未解决问题。

0 个答案:

没有答案