CSS使用控制按钮的视频播放器样式 [英] CSS Styling of a video player with control buttons

问题描述

继续我的最后一个问题（播放按钮以不同的

Continuing my last question on this thread (Play button centred with different image/video sizes), I will open this one regarding to @Marc Audet request.

基本上我有这样的代码：

Basically I had this code:

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

但是我不能使用Marc在最后一个线程上给出的例子，因为播放按钮在视频大小更改时无法正常工作...

However I can't use the example given by Marc on the last thread, because the play button doesn't work as expected when the video size changes...

这里是代码

推荐答案

您需要调整HTML，是这样做的一种方式：

You need to tweak your HTML a bit, here is one way of doing it:

<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保持一切整洁，视频面板 div 视频视频集装箱和控制视频控制。

User a wrapper div to keep everything tidy, video-panel, and use a separate div for the video video-container and for the controls video-controls.

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

The play button and the <video> element are positioned with respect to the video-container and note the negative margin trick to position the arrow button image.

控制元素可以放置在他们的own div video-controls 。我只是用左边的 27px 左边距悬浮他们。

The control elements can be positioned in their own div video-controls. I simply floated them to the left with a 27px left margin.

这应该可以帮助你开始。轮廓和边框仅供参考，并且是可选的。

This should help you get started. The outlines and borders are for illustration only and are optional.

祝你好运！

这篇关于CSS使用控制按钮的视频播放器样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！