2013-06-11 2 views
0

Я пытаюсь показать текст, пока загружается мой html-объект (видео). Раньше был резервным атрибутом, но теперь это устарело. У меня возникли проблемы с тем, чтобы это простое слово появилось во время загрузки объекта. Случается, что onclick слово Loading становится видимым, а затем исчезает во время загрузки объекта. Кто-нибудь знает, пожалуйста, быстрое решение?Как показать текст во время загрузки объекта

HTML:

<div id="vidcontainer" class="half-embed" > 
<div id="loading" style="text-align:center; color: lightgray; position: absolute; z-index:-1;width: 480px; height: 300px;">LOADING ...</div> 
<img src="images/vidoverlay.jpg" style="cursor:pointer; width: 480px; height: 300px; opacity: .7; " /> 
</div> 

CSS:

.half-embed 
    { 
    display:inline; 
    float:right; 
    position:relative; 
    margin-right:-260px; 
    margin-left:15px; 
    padding:15px 0px; 

    } 

JQuery:

$('#vidcontainer').click(function() { 
     $('#vidcontainer img').fadeOut('slow'); 
     $('#vidcontainer').html("<object id='openingVideo' class='BrightcoveExperience'><param name='bgcolor' value='#FFFFFF' /><param name='width' value='480' /><param name='height' value='300' /><param name='playerID' value='xxx' /><param name='playerKey' value='xxx' /><param name='isVid' value='true' /><param name='isUI' value='true' /><param name='dynamicStreaming' value='true' /><param name='autoStart' value='true' /><param name='@videoPlayer' value='xxx' /></object>"); 
     brightcove.createExperiences(); 
});  
+0

Это происходит не так, потому что вы очищая все внутри '# vidcontainer' с функцией' .html() '. – Joe

ответ

0

Вы можете начать загрузку объекта в скрытом/нулевой емкости непрозрачности и как только ваше видео готово для перехода к вашему видео.

На самом деле, может быть, ваша проблема в том, что вы переписываете содержимое своего #vidcontainer div, чтобы ваше изображение и загрузочная этикетка были немедленно уничтожены?

0

насчет создания объекта в FADEOUT обратного вызова:

$('#vidcontainer').click(function() { 
    $('#vidcontainer img').fadeOut('slow', function() { 
     $('#vidcontainer').html("<object id='openingVideo' class='BrightcoveExperience'><param name='bgcolor' value='#FFFFFF' /><param name='width' value='480' /><param name='height' value='300' /><param name='playerID' value='xxx' /><param name='playerKey' value='xxx' /><param name='isVid' value='true' /><param name='isUI' value='true' /><param name='dynamicStreaming' value='true' /><param name='autoStart' value='true' /><param name='@videoPlayer' value='xxx' /></object>"); 
     brightcove.createExperiences(); 
    }); 
}); 

Но им не уверен, если это то, что вы хотите, вопрос не достаточно ясно для меня

+0

Да, это то, что я уже делаю. – LauraNMS

+0

Вы не устанавливаете контент после окончания fadeOut, вы сразу же устанавливаете контент при нажатии, поэтому img disapear и эффект fadeOut не будут работать над элементом, который не существует – Shaddow

+0

Я использую эту структуру, но я все еще работаю над проблемой. – LauraNMS

Смежные вопросы