当前位置：首页 > news >正文

h5直播源码，如何实现一个简易播放器？ - 云豹科技

news 2025/10/18 9:20:07

h5直播源码，如何实现一个简易播放器？

利用 html + js + css 实现一个播放器的简单功能
我们在页面开发过程中会遇到，在页面中播放视频的需求。通常我们利用成熟的视频播放插件来处理

如: video.js 。但是，为了我们的个人成长，也需要了解下如何实现一个简单的 h5 播放器功能。

要实现一个播放功能通常包括：

1、video 标签的使用
2、模拟视频进度条
3、控制播放和暂停
4、控制音量
5、快进和回退

布局

<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><inputtype="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>

样式

// .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);