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

最新推荐文章于 2024-09-13 10:11:04 发布

Friends233

最新推荐文章于 2024-09-13 10:11:04 发布

阅读量897

点赞数

CC 4.0 BY-SA版权

分类专栏： Web 文章标签： Web Html5

本文链接：https://blog.csdn.net/Friends233/article/details/104253528

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示

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

参考文档

HTML 5 视频/音频参考手册

全屏API

部分源码

<div id="video">
    <video src="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">