如何用JavaScript编写网页视频播放器功能？

本文共计2942个文字，预计阅读时间需要12分钟。

今天我和家人分享了一个用JavaScript在网页上编写的播放器。对于播放器，大家都觉得很简单，那么要如何实现呢？下面是我做的一个播放器的图+首先，我们从这个播放器向上向下看看它的结构和功能。

今天我和大家分享用JavaScript在网页编写一个播放器。

对于播放器，大家都不陌生，那么要怎么样才能实现它呢？

下面是我做的一个播放器的图

首先我们从上向下看看这个播放器，它的最上面是标题（head）：我的音乐；中间是内容（body）:歌曲；最下面（foot）:控制音乐播放的控件。标题部分就只有标题：我的音乐，而中间内容部分是歌单，每个歌曲都有一个播放图标（音乐播放时才有）和歌曲的信息，底部部分有一些控制播放的图标、当前播放歌曲名、歌曲播放进度还有歌曲播放时长。

布局这块我们要保存结构与样式分离，结构用HTML写，样式用CSS写。

网页结构布局：我的歌曲不是直接写上去的，是加载json对象的。所以这里我写的内容部分的歌曲只是一个格式。上一首/播放、暂停/下一首的图标，我是用a标签写的，图标加在a标签背景上。歌曲播放的进度这块我是用两个div实现的，里面的一个div显示灰色当作总进度，上面的一个div显示白色当作当前歌曲播放进度。