如何在加载对象时显示文本

时间:2013-06-11 13:46:15

标签: jquery css html5

我正在尝试在加载我的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();
});    

2 个答案:

答案 0 :(得分:0)

您可以开始在隐藏/零不透明度容器中加载对象,并且一旦您的视频准备好转换为您的视频,就可以加载。

实际上,也许您的问题是您覆盖了#vidcontainer div的内容,因此您的图像和加载标签会立即被销毁?

答案 1 :(得分: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();
    });
});

但是我不确定这是不是你想要的,问题对我来说还不够清楚

相关问题