制作统一样式的H5视频播放器

最新推荐文章于 2025-04-23 14:11:05 发布

非科班程序猿

最新推荐文章于 2025-04-23 14:11:05 发布

阅读量1.3k

点赞数 1

文章标签： javascript css html5 jquery

本文链接：https://blog.csdn.net/tjlcy2019/article/details/106907934

版权

本文详细讲解了如何使用JavaScript、CSS和HTML5创建一个样式统一的H5视频播放器，涵盖了全屏接口、播放控制、进度条、时长显示和播放逻辑等关键功能的实现，确保在不同浏览器上的兼容性和一致体验。

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

前言

之前，忙于考试未来及更新文章。本文适用于掌握JavaScript html css jQuery的基本内容的读者。不知大家有没注意原生的H5视频播放器用不同的浏览器打开所呈现的效果并不一样。而如果我们想让不同浏览器打开的样式一样，那么就需要自己制作一个。本文将讲述这个小demo的全流程。
五大主流浏览器原生video的默认样式

demo涉及的主要知识点

        HTML5 全屏接口：
1.requestFullscreen 全屏
（标准化写法浏览器不识别，需要添加浏览器前缀）
        HTML5 视频音频DOM：
2.ended 返回音频/视频的播放是否已结束
3.play（) 开始播放音频/视频
4.pause（）暂停
5.canplay 当浏览器可以播放音频/视频时
6.duration 视频总时长
7.ontimeupdate 当目前的播放位置已更改时
8.paused 设置或返回音频/视频是否暂停
        原生JavaScript：
9.Math.floor() 向下取整
10. ？：三目运算符（？前面相当于if中的条件，：前面是与条件相符执行的内容，：后面是与条件不符执行的内容）
例如：如果 2 < 3 控制台打印正确，否则控制台打印错误

if（）{} else 写法:

 if (2 < 3) {
   
        console.log("正确");
    } else {
   
        console.log("错误");
    }

三目运算符写法：

 (2 < 3) ? console.log("正确"): console.log("错误");

jQuery：
11.toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
12.addClass() 向匹配的元素添加指定的类名。
13.removeClass() 向匹配的元素移除指定的类名。

demo效果及功能

在这里插入图片描述
播放/暂停按钮的切换进度条（已播放模拟已加载总进度）时长数（当前总）全屏.

技术实现

先从结构样式开始
结构：

<h3 class="playerTitle">视频播放器</h3>
    <div class="player">
        <!-- 视频区 -->
        <video src="2.mp4"></video>
        <!-- 控制区 -->
        <div class="controls">
            <a href="javascript:;" class="switch fa fa-play"></a>
            <!-- 播放暂停切换按钮 -->
            <a href="javascript:;" class="expand fa fa-expand"></a>
            <!-- 全屏 -->
            <!-- 进度条区域 -->
            <div class="progress">
                <!-- 响应事件/总时长 -->
                <div class="bar"></div>
                <!-- 已加载 -->
                <div class="loaded"></div>
                <!-- 已播放 -->
                <div class="elapse"></div>
            </div>
            <!-- 时间显示区域 -->
            <div class="time">

最低0.47元/天解锁文章