1

タグに対応するTwitterメッセージのオーバーレイを使用して、ビデオのプレイリストをループするHTMLページを作成しようとしています。

Web環境でも作れると思ったので、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>

私は何を間違っていますか？

事前にどうもありがとうございました。

4

2 に答える 2

1

あなたはそれに伸びる<body>よりも100％の高さを与える必要があります - http://jsfiddle.net/z5kGQ/<div>

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;
}
于 2012-06-15T14:19:25.153 に答える
1

たとえば、つぶやきの div に z-index:100 を配置してみてください

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

object タグから style タグを削除します。jsfiddle に動作中のビデオとサンプル テキストを提供して、上に重ねることができればよいでしょう。オーバーレイに関しては、オブジェクト タグを処理するのが難しいと感じていますが、テストできるようになるまで 100% 確信はありません。

編集 - オブジェクト タグ パラメータで wmode=transparent を設定してみてください

<PARAM name="WMode" value="transparent">
于 2012-06-15T14:19:42.267 に答える