Web 自定义样式的视频播放器

最新推荐文章于 2026-06-27 14:37:28 发布

原创

最新推荐文章于 2026-06-27 14:37:28 发布 · 962 阅读

收录于

当前文章被以下社区和专栏收录：

本文展示了如何使用HTML5实现一个自定义样式的视频播放器，尽管作者认为样式设计较为简单，但提供了参考文档和部分源码供读者学习。文章包括全屏API的运用，以及一个自定义样式播放器的源代码分享，提取码为9f0p。

效果展示

虽然说是自定义样式，但是我这做的着实有点丑。。。

参考文档

HTML 5 视频/音频参考手册

全屏API

部分源码

<div id="video">
    <video src="https://blog.csdn.net/video/vaeYSGS.mp4"></video>
    <div class="controls">
        <a href="#" class="left">开始</a>
        <a href="#" class="right">全屏</a>
        <div class="progress">
            <div class="bar"></div>
            <div class="elapse"></div>
        </div>
        <div class="time">

标签