0

继续我在这个线程上的最后一个问题（播放按钮以不同的图像/视频大小为中心），我将打开这个关于@Marc Audet 请求的问题。

基本上我有这个代码：

.playBT{
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 999;
    top: 25%;
    left: 25%;
    margin-left: -25px;
    margin-top: -25px;
}

但是我不能使用 Marc 在最后一个线程中给出的示例，因为当视频大小发生变化时，播放按钮无法按预期工作......

这是代码

4

1 回答 1

1

您需要稍微调整一下 HTML，这是一种方法：

<div id="video-panel">
    <div id="video-container" class="video-js-box">
        <div id="play" class="playBT"><img class="imgBT" src="http://2.bp.blogspot.com/-RnPjQOr3PSw/Teflrf1dTaI/AAAAAAAAAbc/zQbRMLQmUAY/s1600/player_play.png" /></div>
        <video id="video1">
            <source src="http://video-js.zencoder.com/oceans-clip.mp4"/>
        </video>
    </div>
    <div id="video-controls">
        <div id="footerplay"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/play.png" /></div>
        <div id="footerpause"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/pause.png" /></div>
        <div id="progressbar">
            <div id="chart"></div>
            <div id="seeker"></div>
        </div>            
    </div>
</div>

CSS如下：

#video-panel {
    border: 4px solid blue;
    padding: 4px 50px;
}
.video-js-box {
    width: auto;
    height: auto;
    outline: 1px dotted blue;
    position: relative;
    display: block;
}
video {
    outline: 1px dotted blue;
    margin: 0 auto;
    display: block;
}

#play {
    position:absolute;
    top: 50%;
    left: 50%;
    outline: 1px dotted red;
}

.imgBT{
    width:50px;
    height:50px;
    vertical-align: bottom;
    margin-left: -25px;
    margin-top: -25px;
}

#video-controls {
    outline: 1px solid red;
    overflow: auto;
}

#footerplay {
    float: left;
    margin-left: 27px;
}

#footerpause {
    float: left;
    margin-left: 27px;
}

#progressbar {
    float: left;
    outline: 1px dotted black;
    display: inline-block;
    width: 200px;
    height: 27px;
    margin-left: 27px;
}

#footerplay img, #footerpause img{
    height:27px;
}

小提琴参考：http: //jsfiddle.net/audetwebdesign/EnDHw/

解释和细节

使用包装 div 以保持一切整洁，并为视频和控件video-panel使用单独的 div 。video-containervideo-controls

play按钮和<video>元素相对于 定位并video-container注意负边距技巧来定位箭头按钮图像。

控制元素可以定位在它们自己的 divvideo-controls中。27px我只是用左边距将它们浮动到左边。

这应该可以帮助您入门。轮廓和边框仅用于说明，是可选的。

祝你好运！

于 2013-04-03T19:11:11.770 回答