Question

我正在尝试创建一个HTML页面来循环播放视频播放列表，其中包含与某些标记相对应的Twitter消息。

我以为我可以在网络环境中制作它，所以我尝试将HTML和CSS结合起来。

我正在努力实现它的工作方式是嵌入一个宽度和高度为100％的WMPlayer对象，并在该图层的顶部放置另一个带背景的图层和一些用于加载推文的PHP代码。

但它根本不起作用......不尝试使用图像，甚至只使用文本进行尝试。我认为问题可能是无法在视频顶部放置任何内容，当然，我的代码也是错误的。

这是：

html, body {
    height: 100%
}

.video{   
   width: 100%;
   height: 100%;;
   position: relative;
    background: #0f0;
}
.tweets {    
    width:50%;
    height:350px;
    position: absolute;
    top: 0; left: 0;
    background: #f00;
    z-index:100
}

HTML：

<div class="video">
            <OBJECT id="VIDEO" width="100%" height="100%" 
                CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
                type="application/x-oleobject">
                    <PARAM NAME="URL" VALUE="http://www.falange.es/videos/video.mp4">
                <PARAM NAME="SendPlayStateChangeEvents" VALUE="True">
                <PARAM NAME="AutoStart" VALUE="True">
                <PARAM name="uiMode" value="none">
                <PARAM name="PlayCount" value="9999">
                <PARAM name="WMode" value="opaque">
                <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" 
                name="mediaplayer1" autostart="true" width="100%" height="100%" transparentstart="1" SHOWSTATUSBAR="1" 
                    loop="0" controller="true" src="http://www.falange.es/videos/video.mp4" stretchToFit="true" ></embed>
            </OBJECT>       
            <div class="tweets">
                Tweets here.
            </div>          
        </div>

我做错了什么？

非常感谢你。

Answer 1

您必须将<body>的高度设为100％，而<div>将延伸至http://jsfiddle.net/z5kGQ/

html, body {
    height: 100%;
}

.video {
   width: 100%;
   height: 100%;
   position: relative;
   background: beige;
}

.tweets {
    width:100%;
    min-height:150px;
    position: absolute;
    top: 0;
    background: orange;
}

Answer 2

尝试将z-index：100放在推文div

上

.tweets {
    z-index:100;
    width:100%;
    min-height:350px;
    position: absolute;
    background: url(img.png) top left no-repeat;
}

从对象标记中删除样式标记，如果您可以为jsfiddle提供工作视频和示例文本以覆盖在顶部，那将是一件好事。我有一种感觉，对于叠加层来说，对象标签很难处理，但在我测试之前我并不是百分之百确定

编辑 - 尝试在对象标记参数中设置wmode = transparent

<PARAM name="WMode" value="transparent">

将带有图像的div放在具有嵌入视频的另一个div的顶部

2 个答案: