Question

继续关于这个帖子的最后一个问题（Play button centred with different image/video sizes），我将打开这个关于@Marc Audet请求的问题。

基本上我有这个代码：

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

但是我不能在最后一个帖子上使用Marc给出的例子，因为当视频大小改变时，播放按钮不能按预期工作......

Here是代码

Answer 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/

解释＆amp;细节

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

play按钮和<video>元素相对于video-container定位，并记下负边距技巧以定位箭头按钮图像。

控件元素可以放在他们自己的div video-controls中。我只是将它们向左浮动，左边距为27px。

这应该可以帮助您入门。轮廓和边框仅供参考，是可选的。
祝你好运！

CSS带控制按钮的视频播放器的样式

1 个答案: