利用 html + js + css 实现一个播放器的简略性能
咱们在页面开发过程中会遇到，在页面中播放视频的需要。通常咱们利用成熟的 视频播放插件来解决
如: video.js 。然而，为了咱们的个人成长，也须要理解下如何实现一个简略的 h5 播放器性能。
要实现一个播放性能通常包含：
- video 标签的应用
- 模仿视频进度条
- 管制播放和暂停
- 管制音量
- 快进和回退
布局
<div class="player"> <video src="./video.mp4" class="player_video"></video> <div class="player_controls"> <div class="progress"> <div class="progress_fill"></div> </div> <button class="player_button toggle" title="Toggle Play">►</button> <input type="range" class="player_range" name="playbackRate" min="0.5" max="2" step="0.1" value="1" /> <button data-skip="-10" class="player_button">« 10s</button> <button data-skip="25" class="player_button">25s »</button> </div></div>款式
// .scsshtml { 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 根底