Styling HTML5 Video Controls

Question

Я, похоже, не верю, что стиль правилен для элементов управления видео плеером, поскольку ничто не кажется правильно выровненным.

Я пробовал обертывать предметы в divs, а lis, но вещи просто не двигаются или выравниваются правильно.

Любые предложения?

Что я до сих пор: http://jsfiddle.net/pp6Wn/

var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullscreenbtn; 
 

 
function intializePlayer() { 
 
    // Set object references 
 
    vid = document.getElementById("my_video"); 
 
    playbtn = document.getElementById("playpausebtn"); 
 
    seekslider = document.getElementById("seekslider"); 
 
    curtimetext = document.getElementById("curtimetext"); 
 
    durtimetext = document.getElementById("durtimetext"); 
 
    mutebtn = document.getElementById("mutebtn"); 
 
    volumeslider = document.getElementById("volumeslider"); 
 
    fullscreenbtn = document.getElementById("fullscreenbtn"); 
 
    // Add event listeners 
 
    playbtn.addEventListener("click", playPause, false); 
 
    seekslider.addEventListener("change", vidSeek, false); 
 
    vid.addEventListener("timeupdate", seektimeupdate, false); 
 
    mutebtn.addEventListener("click", vidmute, false); 
 
    volumeslider.addEventListener("change", setvolume, false); 
 
    fullscreenbtn.addEventListener("click", toggleFullScreen, false); 
 
} 
 
window.onload = intializePlayer; 
 

 
function playPause() { 
 
    if (vid.paused) { 
 
    vid.play(); 
 
    playbtn.style.background = "url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE4IDE4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik03LjAxMSwxNi4yODVjMCwwLjY3Mi0wLjYxMiwxLjIxNS0xLjM2NiwxLjIxNUg0LjIyM2MtMC43NTQsMC0xLjM2NS0wLjU0My0xLjM2NS0xLjIxNVYxLjcxNA0KCQljMC0wLjY3LDAuNjExLTEuMjE0LDEuMzY1LTEuMjE0aDEuNDIyYzAuNzU0LDAsMS4zNjYsMC41NDQsMS4zNjYsMS4yMTRWMTYuMjg1eiIvPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNS4xNDIsMTYuMjg1YzAsMC42NzItMC41ODYsMS4yMTUtMS4zMDgsMS4yMTVoLTEuMzYzYy0wLjcyMywwLTEuMzA4LTAuNTQzLTEuMzA4LTEuMjE1VjEuNzE0DQoJCWMwLTAuNjcsMC41ODUtMS4yMTQsMS4zMDgtMS4yMTRoMS4zNjNjMC43MjIsMCwxLjMwOCwwLjU0NCwxLjMwOCwxLjIxNFYxNi4yODV6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==)"; 
 
    playbtn.style.backgroundSize = "100% 100%"; 
 
    } else { 
 
    vid.pause(); 
 
    playbtn.style.background = "url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSI5MSA5MSAxOCAxOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyA5MSA5MSAxOCAxOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBvcGFjaXR5PSIwLjk1IiBmaWxsPSIjRkZGRkZGIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgZD0iTTkzLjI1OCw5MS4yMzlsMTQuNjkyLDcuNjgxYzEuMTQxLDAuNTk2LDEuMTQxLDEuNTYzLDAsMi4xNTkNCgkJbC0xNC42OTIsNy42ODNjLTEuMTQsMC41OTctMi4wNjQsMC4wMzctMi4wNjQtMS4yNDhWOTIuNDg3QzkxLjE5NCw5MS4yMDIsOTIuMTE4LDkwLjY0Myw5My4yNTgsOTEuMjM5eiIvPg0KPC9nPg0KPC9zdmc+DQo=)"; 
 
    playbtn.style.backgroundSize = "100% 100%"; 
 
    } 
 
} 
 

 
function vidSeek() { 
 
    var seekto = vid.duration * (seekslider.value/100); 
 
    vid.currentTime = seekto; 
 
} 
 

 
function seektimeupdate() { 
 
    var nt = vid.currentTime * (100/vid.duration); 
 
    seekslider.value = nt; 
 
    var curmins = Math.floor(vid.currentTime/60); 
 
    var cursecs = Math.floor(vid.currentTime - curmins * 60); 
 
    var durmins = Math.floor(vid.duration/60); 
 
    var dursecs = Math.floor(vid.duration - durmins * 60); 
 
    if (cursecs < 10) { 
 
    cursecs = "0" + cursecs; 
 
    } 
 
    if (dursecs < 10) { 
 
    dursecs = "0" + dursecs; 
 
    } 
 
    if (curmins < 10) { 
 
    curmins = "0" + curmins; 
 
    } 
 
    if (durmins < 10) { 
 
    durmins = "0" + durmins; 
 
    } 
 
    curtimetext.innerHTML = curmins + ":" + cursecs; 
 
    durtimetext.innerHTML = durmins + ":" + dursecs; 
 
} 
 

 
function vidmute() { 
 
    if (vid.muted) { 
 
    vid.muted = false; 
 
    mutebtn.innerHTML = "Mute"; 
 
    } else { 
 
    vid.muted = true; 
 
    mutebtn.innerHTML = "Unmute"; 
 
    } 
 
} 
 

 
function setvolume() { 
 
    vid.volume = volumeslider.value/100; 
 
} 
 

 
function toggleFullScreen() { 
 
    if (vid.requestFullScreen) { 
 
    vid.requestFullScreen(); 
 
    } else if (vid.webkitRequestFullScreen) { 
 
    vid.webkitRequestFullScreen(); 
 
    } else if (vid.mozRequestFullScreen) { 
 
    vid.mozRequestFullScreen(); 
 
    } 
 
}

#video-container, 
 
#playpausebtn, 
 
#fullscreenbtn, 
 
#mutebtn, 
 
#curtimetext, 
 
#durtimetext, 
 
#seekslider, 
 
#volumeslider { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#video-container { 
 
    position: relative; 
 
} 
 
div#video_controls_bar { 
 
    position: absolute; 
 
    background: #61676D; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto 5% auto; 
 
    width: 60%; 
 
    height: 35px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    padding-right: 5%; 
 
    padding-left: 5%; 
 
    -webkit-border-radius: 12px; 
 
    -moz-border-radius: 12px; 
 
    border-radius: 12px; 
 
    opacity: 0; 
 
    -webkit-transition: opacity .3s; 
 
    -moz-transition: opacity .3s; 
 
    -o-transition: opacity .3s; 
 
    -ms-transition: opacity .3s; 
 
    transition: opacity .3s; 
 
} 
 
#video-container:hover #video_controls_bar { 
 
    opacity: 1; 
 
} 
 
button#playpausebtn { 
 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSI5MSA5MSAxOCAxOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyA5MSA5MSAxOCAxOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBvcGFjaXR5PSIwLjk1IiBmaWxsPSIjRkZGRkZGIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgZD0iTTkzLjI1OCw5MS4yMzlsMTQuNjkyLDcuNjgxYzEuMTQxLDAuNTk2LDEuMTQxLDEuNTYzLDAsMi4xNTkNCgkJbC0xNC42OTIsNy42ODNjLTEuMTQsMC41OTctMi4wNjQsMC4wMzctMi4wNjQtMS4yNDhWOTIuNDg3QzkxLjE5NCw5MS4yMDIsOTIuMTE4LDkwLjY0Myw5My4yNTgsOTEuMjM5eiIvPg0KPC9nPg0KPC9zdmc+DQo=); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
    width: 7%; 
 
    height: 30px; 
 
    cursor: pointer; 
 
    border: 0; 
 
    background-color: red; 
 
} 
 
button#playpausebtn:hover { 
 
    cursor: pointer; 
 
} 
 
button#fullscreenbtn { 
 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE4IDE4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIG9wYWNpdHk9IjAuOTUiPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNy41LDEyLjU1MWMwLDAuMzg1LTAuMzE0LDAuNjk5LTAuNjk5LDAuNjk5aC0xLjM5MmMtMC4zODUsMC0wLjQ3NywwLjIyMy0wLjIwNCwwLjQ5M2wxLjgxMSwxLjgwNA0KCQljMC4yNzIsMC4yNzEsMC4yNzIsMC43MTcsMC4wMDIsMC45ODlsLTAuNTA3LDAuNTFjLTAuMjcxLDAuMjczLTAuNzE0LDAuMjczLTAuOTg1LDBsLTEuNzgzLTEuNzk3DQoJCWMtMC4yNzEtMC4yNzMtMC40OTItMC4xODMtMC40OTIsMC4yMDJ2MS4zNWMwLDAuMzg1LTAuMzE0LDAuNjk5LTAuNjk5LDAuNjk5aC0wLjcyNmMtMC4zODYsMC0wLjctMC4zMTQtMC43LTAuNjk5di00Ljk3Ng0KCQljMC0wLjM4NiwwLjMxNC0wLjcsMC43LTAuN2g0Ljk3NmMwLjM4NSwwLDAuNjk5LDAuMzE0LDAuNjk5LDAuN1YxMi41NTF6IE0wLjUsMTIuNTUxYzAsMC4zODUsMC4zMTQsMC42OTksMC42OTksMC42OTloMS4zNQ0KCQljMC4zODUsMCwwLjQ3NiwwLjIyMywwLjIwNSwwLjQ5NGwtMS44MDEsMS44MDNjLTAuMjcyLDAuMjcxLTAuMjcyLDAuNzE3LDAsMC45ODhsMC41MTQsMC41MTRjMC4yNzEsMC4yNzIsMC43MTcsMC4yNzIsMC45ODgsMA0KCQlsMS44MDEtMS44MDFjMC4yNzItMC4yNzIsMC40OTUtMC4xOCwwLjQ5NSwwLjIwNXYxLjM0OGMwLDAuMzg1LDAuMzE0LDAuNjk5LDAuNjk5LDAuNjk5aDAuNzI2YzAuMzg1LDAsMC43LTAuMzE0LDAuNy0wLjY5OXYtNC45NzYNCgkJYzAtMC4zODYtMC4zMTQtMC43LTAuNy0wLjdIMS4xOTljLTAuMzg1LDAtMC42OTksMC4zMTQtMC42OTksMC43VjEyLjU1MXogTTE3LjUsNS40NDljMC0wLjM4NS0wLjMxNC0wLjY5OS0wLjY5OS0wLjY5OWgtMS4zOTINCgkJYy0wLjM4NSwwLTAuNDc2LTAuMjIyLTAuMjAyLTAuNDkybDEuODA2LTEuNzg0YzAuMjczLTAuMjcxLDAuMjc0LTAuNzE0LDAuMDAxLTAuOTg0bC0wLjUtMC40OTcNCgkJYy0wLjI3Mi0wLjI3MS0wLjcxNy0wLjI2OS0wLjk4OCwwLjAwNGwtMS43ODMsMS43OTdDMTMuNDcyLDMuMDY3LDEzLjI1LDIuOTc2LDEzLjI1LDIuNTlWMS4xOTljMC0wLjM4NS0wLjMxNC0wLjY5OS0wLjY5OS0wLjY5OQ0KCQloLTAuNzI2Yy0wLjM4NiwwLTAuNywwLjMxNC0wLjcsMC42OTl2NC45NzZjMCwwLjM4NSwwLjMxNCwwLjcsMC43LDAuN2g0Ljk3NmMwLjM4NSwwLDAuNjk5LTAuMzE0LDAuNjk5LTAuN1Y1LjQ0OXogTTAuNSw2LjE3NQ0KCQljMCwwLjM4NSwwLjMxNCwwLjcsMC42OTksMC43aDQuOTc2YzAuMzg1LDAsMC43LTAuMzE0LDAuNy0wLjdWMS4xOTljMC0wLjM4NS0wLjMxNC0wLjY5OS0wLjctMC42OTlINS40NDkNCgkJQzUuMDY0LDAuNSw0Ljc1LDAuODE0LDQuNzUsMS4xOTlWMi41OWMwLDAuMzg1LTAuMjIyLDAuNDc4LTAuNDk1LDAuMjA1bC0xLjgwMS0xLjhDMi4xODMsMC43MjIsMS43MzYsMC43MjEsMS40NjIsMC45OTENCgkJbC0wLjUwNywwLjVjLTAuMjczLDAuMjctMC4yNzQsMC43MTMtMC4wMDEsMC45ODNsMS43OTgsMS43ODRDMy4wMjQsNC41MjgsMi45MzQsNC43NSwyLjU0OSw0Ljc1aC0xLjM1DQoJCUMwLjgxNCw0Ljc1LDAuNSw1LjA2NCwwLjUsNS40NDlWNi4xNzV6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
    width: 7%; 
 
    height: 40px; 
 
    cursor: pointer; 
 
    border: 0; 
 
    background-color: blue; 
 
} 
 
button#mutebtn { 
 
    width: 10%; 
 
    background-color: green; 
 
} 
 
#curtimetext, 
 
#durtimetext { 
 
    width: 5%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
input#seekslider { 
 
    width: 35%; 
 
    height: 20px; 
 
    background-color: yellow; 
 
} 
 
input#volumeslider { 
 
    width: 10%; 
 
    background-color: red; 
 
} 
 
input[type='range'] { 
 
    -webkit-appearance: none !important; 
 
    background: #384047; 
 
    -webkit-border-radius: 12px; 
 
    -moz-border-radius: 12px; 
 
    border-radius: 12px; 
 
} 
 
input[type='range']::-webkit-slider-thumb { 
 
    -webkit-appearance: none !important; 
 
    background: #6CBB7C; 
 
    height: 20px; 
 
    width: 20px; 
 
    border-radius: 100%; 
 
    cursor: pointer; 
 
} 
 
input[type="range"]::-webkit-slider-thumb:hover { 
 
    -webkit-animation: pulse 1s infinite; 
 
} 
 
@-webkit-keyframes pulse { 
 
    from { 
 
    -webkit-box-shadow: 0 0 2px transparent; 
 
    } 
 
    50% { 
 
    -webkit-box-shadow: 0 0 10px #e74c3c; 
 
    } 
 
    to { 
 
    -webkit-box-shadow: 0 0 2px transparent; 
 
    } 
 
} 
 
@media screen and (max-width: 500px) { 
 
    #curtimetext, 
 
    #durtimetext { 
 
    display: none; 
 
    } 
 
}

<div id="video-container"> 
 
    <video id="my_video" width="100%" height="100%"> 
 
    <source src="http://romain-menard.fr/cours_html5/sitedemo/src/small.mp4" type="video/mp4" /> 
 
    <source src="video/movie.webm" type="video/webm" /> 
 
    </video> 
 
    <!-- Video Controls --> 
 
    <div id="video_controls_bar"> 
 
    <button id="playpausebtn"></button> 
 

 
    <span id="curtimetext">00:00</span> 
 
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1"><span id="durtimetext">00:00</span> 
 
    <button id="mutebtn">Mute</button> 
 
    <input id="volumeslider" type="range" min="0" max="100" value="100" step="1"> 
 
    <button id="fullscreenbtn"></button> 
 
    </div> 
 
</div>

Это эффект, который я стремлюсь

Answer 1

Я обновил свой jsfiddle исправить это для вас, вам нужны элементы CSS dded:

.class{ 
    display: inline-block; 
    vertical-align: middle; 
} 

http://jsfiddle.net/pp6Wn/2/

Answer 2

вы можете использовать Flex-поле:

#video_controls_bar{ 
    display: flex; 
    align-items: center; // All items vertically centered. 
}