利用jQuery实现h5播放器播放组件

最新推荐文章于 2024-03-20 14:15:12 发布

我是真的不会前端

最新推荐文章于 2024-03-20 14:15:12 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/qq_23539691/article/details/118618560

版权

本文介绍了如何利用jQuery构建一个H5播放器组件，包括html结构、css样式和js逻辑。虽然H5原生提供了video标签，但作者认为使用jQuery有助于简化DOM操作。文章还提到了所依赖的第三方库，如jquery、iconfont和audio标签，并指出组件存在的问题，如进度条拖拽bug和音量交互体验不佳。

摘要由CSDN通过智能技术生成

播放组件介绍

首先会H5播放组件其实自带video audio标签，只需要引入添加属性就可以自动在网页上播放，同样，vue和react也有相应的播放插件。比如vue-video-player 和react native的播放组件
这里提供一个npm地址

https://www.npmjs.com/package/vue-video-player

https://www.npmjs.com/package/react-native-video-controls

但是呢，作为前端工程师，多用原生js写逻辑在某种程度上是对基础夯实的最有效途径。那这里偷了个懒，说好的不用框架写但还是用了jquery，毕竟可以稍微再某些节点操作上偷点懒
那废话不多说，上代码。

代码介绍

说实话，没啥介绍的有jjquery和js基础的都看得懂，其实就是对各种dom对象和h5音视频api的操作。而且代码有各种注释，应该读懂不复杂，作为前端码农。这是入门必须有的基本功

引入的第三方库

jquery

最新版本即可也可以通过npm下载模块化导入

iconfont

用来做播放图标的手搓css太丑了

音频

audio 标签中自己导入你需要导入的音频
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210710011218328.png

<audio src="./media/media.mp3"></audio>

注意是音频噢

html结构

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
<link rel="stylesheet" href="./font/iconfont.css">
<link rel="stylesheet" href="./css/media.css">
<script src="./js/jquery.js"></script>
</head>
<body>
<audio src="./media/media.mp3"></audio>
<div class="media">
    <div class="playOrPause">
        <i class="iconfont icon-bofang"></i>
    </div>
    <div class="time">
        <span class="currentMinute">00</span>
        :
        <span class="currentSecond">00</span>
        /
        <span class="durationMinute">00</span>
        :
        <span class="durationSecond">00</span>
    </div>
    <div class="playRange">
        <div class="currentRange"></div>
        <div class="playBtn"></div>
    </div>
    <div class="volume">
        <div class="volumeRange">
            <div class="currentVolume"></div>
            <div class="volumeBtn"></div>
        </div>
        <i class="iconfont icon-volume"></i>
    </div>
</div>
</body>
<script

最低0.47元/天解锁文章

我是真的不会前端

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用jQuery实现h5播放器播放组件

播放组件介绍首先会H5播放组件其实自带video audio标签，只需要引入添加属性就可以自动在网页上播放，同样，vue和react也有相应的播放插件。比如vue-video-player 和react native的播放组件这里提供一个npm地址https://www.npmjs.com/package/vue-video-playerhttps://www.npmjs.com/package/react-native-video-controls但是呢，作为前端工程师，多用原
复制链接

扫一扫