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

播放组件介绍

首先会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>documenttitle>
<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">00span>
        :
        <span class="currentSecond">00span>
        /
        <span class="durationMinute">00span>
        :
        <span class="durationSecond">00span>
    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 

你可能感兴趣的:(html5,jquery,javascript,前端)