h5 - 实现播放功能
码农天地 -利用 html + js + css 实现一个播放器的简单功能
我们在页面开发过程中会遇到,在页面中播放视频的需求。通常我们利用成熟的 视频播放插件来处理
如: video.js 。但是,为了我们的个人成长,也需要了解下如何实现一个简单的 h5 播放器功能。
要实现一个播放功能通常包括:
video 标签的使用模拟视频进度条控制播放和暂停控制音量快进和回退布局<div >
<video src="./video.mp4" ></video>
<div >
<div >
<div ></div>
</div>
<button title="Toggle Play">►</button>
<input
type="range"
name="playbackRate"
min="0.5"
max="2"
step="0.1"
value="1"
/>
<button data-skip="-10" >« 10s</button>
<button data-skip="25" >25s »</button>
</div>
</div>
样式// .scss
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background: #fff;
min-height: 100vh;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
.player {
width: 750px;
border: 2px solid #000;
position: relative;
font-size: 0;
overflow: hidden;
.player_video {
width: 100%;
}
&:fullscreen {
max-width: none;
width: 100%;
}
&:-webkit-full-screen {
max-width: none;
width: 100%;
}
&:hover .progress {
height: 15px;
}
&:hover .player_controls {
transform: translateY(0);
}
}
.player_controls {
display: flex;
position: absolute;
bottom: 0;
width: 100%;
transform: translateY(100%) translateY(-5px);
transition: all 0.3s;
flex-wrap: wrap;
background: rgba(0, 0, 0, 0.7);
& > * {
flex: 1;
}
.player_button {
background: none;
border: 0;
outline: none;
line-height: 1;
color: #fff;
text-align: center;
padding: 0;
cursor: pointer;
max-width: 50px;
&:focus {
border-color: #ffc600;
}
}
.player_range {
width: 10px;
height: 30px;
}
.progress {
flex: 10;
position: relative;
display: flex;
flex-basis: 100%;
height: 5px;
transition: height 0.3s;
background: rgba(0, 0, 0, 0.5);
cursor: ew-resize;
.progress_fill {
// width: 10%;
background: #ffc600;
flex: 0;
flex-basis: 10%;
}
}
}
// 进度条
input[type='range'] {
-webkit-appearance: none;
background: transparent;
width: 100%;
margin: 0 5px;
&:focus {
outline: none;
}
&::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
background: rgba(255, 255, 255, 0.8);
border-radius: 1.3px;
border: 0.2px solid rgba(1, 1, 1, 0);
}
&::-webkit-slider-thumb {
height: 15px;
width: 15px;
border-radius: 50px;
background: #ffc600;
cursor: pointer;
-webkit-appearance: none;
margin-top: -3.5px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
&:focus::-webkit-slider-runnable-track {
background: #bada55;
}
&::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
background: #ffffff;
border-radius: 1.3px;
border: 0.2px solid rgba(1, 1, 1, 0);
}
&::-moz-range-thumb {
box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
height: 15px;
width: 15px;
border-radius: 50px;
background: #ffc600;
cursor: pointer;
}
}
脚本 const player = document.querySelector('.player');
const video = document.querySelector('.player_video');
const toggle = document.querySelector('.toggle');
// 播放 or 暂停
function toggleVideo() {
const methods = video.paused ? 'play' : 'pause';
video[methods]();
}
function updateButton() {
const image = this.paused ? '►' : '❚ ❚';
toggle.textContent = image;
}
// 控制播放
video.addEventListener('click', toggleVideo);
video.addEventListener('play', updateButton);
video.addEventListener('pause', updateButton);
toggle.addEventListener('click', toggleVideo);
总结学习了 input[type="range"] 来模拟进度条复习了 js 控制拖动复习了 flex 基础 特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。
上一篇: 前端性能优化
下一篇: ?️ Web 站点暗色模式探索