HTML5 媒体播放器 video、audio 自定义播放器进度条（下）

已于 2024-06-13 19:49:31 修改
阅读量777 收藏 12
点赞数 5
文章标签： microsoft 前端 javascript
于 2024-06-13 19:47:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67793437/article/details/139662271
版权

接上一篇：HTML5 媒体播放器 video、audio 自定义播放器进度条（上）

本篇主要介绍进度条与播放器标签的交互，以 <video> 举例，<audio>基本一样。

1、结构

代码添加如下结构：

    <div class="box">
        <div class="media-box">
            <video 
              id="videoId" 
              class="video" 
              width="100%" 
              height="100%" 
              controls></video>
        </div>

        <div id="slide-box">
            <div id="slide">
                <div id="slide-progress"></div>
                <div id="slide-inside"></div>
                <div id="point-box">
                    <div class="point"></div>
                </div>
            </div>
        </div>
        <button id="btn">开始</button>
    </div>

2、相关事件

  • 通过监听<video>相关事件，动态更新进度条

2.1、定义变量并监听事件

监听播放器主要事件之前，先定义一下变量：

        let duration = '' // 用于显示的总时长，格式 xx:xx
        let currentTime = '' // 用于显示的当前播放的时刻
        let max = '' // 总时长
        let value = '' // 当前时刻
        let video = null 
        let videoDom = document.getElementById('videoId')
        let src = ''

        videoDom.addEventListener('canplay', canplay)
        videoDom.addEventListener('timeupdate', timeupdate)
        videoDom.addEventListener('pause', videoPause)
        videoDom.addEventListener('ended', videoEnded)
        videoDom.addEventListener('error', videoError)
        videoDom.addEventListener('progress', videoProgress)

关于 <vidoe> 简介，可参考：HTML5 ＜video＞常用属性、时间、方法及基础使用说明

2.2 canplay--媒体可播放

        function canplay(e) {
            let v = e.target;
            duration = formatterTime(v.duration);
            max = parseInt(v.duration * 1000); //目的是让进度条计算时精确，也可以不*1000
            video = v;
            console.log('canplay',max);
        }

该事件主要通过 duration 获取到总时长， 

formatterTime 函数用于格式化展示的数据：

        function formatterTime(time) {
            let minute = parseInt(time / 60);
            let seconds = parseInt(time - minute * 60);
            minute = minute < 10 ? "0" + minute : minute;
            seconds = seconds < 10 ? "0" + seconds : seconds;
            return `${minute}:${seconds}`;
        }

2.3 timeupdate--播放时间更新

        function timeupdate(e) {
            currentTime = formatterTime(e.target.currentTime);
            value = parseInt(e.target.currentTime * 1000);
            
   console.log('timeupdate',e.target.currentTime,max,`${currentTime}:${duration}`);
            // 更新进度条
            slideProcess(value)
        }

该事件主要检测视频播放时间更新，动态更新进度条

其中 slideProcess 计算：

        function slideProcess(v) {
            v = v >= max ? max : v
            slideInsideDom.style.width = (v / max) * 100 + '%'
            pointBoxDom.style.left = (v / max) * 100 + '%'
        }

2.4 progress -- 更新 加载进度

        function videoProgress(e) {
            if( e.target.buffered.length  > 0 ){
                // console.log('videoProgress-加载进度', e.target.buffered.end(0) );
                let v = e.target.buffered.end(0) * 1000
                progressDom.style.width = ( v / max) * 100 + '%'
            }
            
        }

 该事件主要用于更新加载进度

2.5 播放

定义一按钮，实现简单点击播放，到这里，进度条就可以根据视频动态更新位置及显示加载条

        let btnDom = document.getElementById('btn')
        btnDom.addEventListener('click', btnClick)


        function btnClick(e){
            pauseEvent(e)
            console.log('鼠标点击');
            init('./mov_bbb.mp4')
        }

        function init(s) {
            src = s
            if(!video)video = videoDom
            video.src = src;
            video.play()
                .then(() => {
                })
                .catch(err => {
                    console.error(err);
                    videoPause();
                });
        }

3、进度条操作

进度条的操作主要是监听鼠标按下 mousemove 和移动拖拽事件 mousemove，当按下或拖拽时，进行的操作：

  • 更新进度条样式
  • 更新 video 的 currentTime

在 setPosition 函数添加：

​
        function setPosition(e) {
            let x = e.clientX - slideDom.offsetLeft
            x = x < 0 ? 0 : x
            x = x >= extent ? extent : x
            slideInsideDom.style.width = (x / extent) * 100 + '%'
            pointBoxDom.style.left = (x / extent) * 100 + '%'
            // 新增如下代码
            if(video && max){
                video.currentTime = x / extent * max / 1000
            }
        }

​

一个简单的自定义进度条就实现了。 

 4、完整代码

可以将下面完整代码复制到本地运行。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .box {
            width: 800px;
            margin: 50px auto;
        }

        .media-box {
            width: 800px;
            height: 400px;
            border: 1px solid #000;
        }

        #slide-box {
            margin-top: 20px;
            width: 700px;
            height: 26px;
            padding: 8px 0;
            cursor: pointer;
        }

        #slide {
            height: 10px;
            position: relative;
            background-color: #e4e7ed;
            border-radius: 8px;
        }

        #slide-progress,
        #slide-inside {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            border-radius: 8px;
        }

        #slide-progress {
            background-color: #c6c8c9;
            width: 0%;
            transition: all ease;
        }

        #slide-inside {
            background-color: #f98e2d;
            z-index: 10;
            width: 0%;
            transition: all ease;
        }

        #point-box {
            width: 24px;
            height: 24px;
            position: absolute;
            top: 50%;
            left: 0%;
            transform: translate(-50%, -50%);
            z-index: 11;
        }

        .point {
            position: absolute;
            border: 12px solid #fff;
            box-shadow: 1px 1px 2px #454343;
            border-radius: 50%;
        }

        .point:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="media-box">
            <video 
              id="videoId" 
              class="video" 
              width="100%" 
              height="100%" 
              controls></video>
        </div>

        <div id="slide-box">
            <div id="slide">
                <div id="slide-progress"></div>
                <div id="slide-inside"></div>
                <div id="point-box">
                    <div class="point"></div>
                </div>
            </div>
        </div>
        <button id="btn">开始</button>
    </div>

    <script>
        let duration = '' // 用于显示的总时长，格式 xx:xx
        let currentTime = '' // 用于显示的当前播放的时刻
        let max = '' // 总时长
        let value = '' // 当前时刻
        let video = null 
        let videoDom = document.getElementById('videoId')
        let src = ''


        let slideDom = document.getElementById('slide-box')
        let slideInsideDom = document.getElementById('slide-inside')
        let pointBoxDom = document.getElementById('point-box')
        let progressDom = document.getElementById('slide-progress')
        let extent = slideDom.getBoundingClientRect().width
        console.log(111111, extent);
        slideDom.addEventListener('mousedown', mousedownFun)
        document.addEventListener('mouseup', mouseupFun)


        videoDom.addEventListener('canplay', canplay)
        videoDom.addEventListener('timeupdate', timeupdate)
        videoDom.addEventListener('pause', videoPause)
        videoDom.addEventListener('ended', videoEnded)
        videoDom.addEventListener('error', videoError)
        videoDom.addEventListener('progress', videoProgress)

        let btnDom = document.getElementById('btn')
        btnDom.addEventListener('click', btnClick)


        function btnClick(e){
            pauseEvent(e)
            console.log('鼠标点击');
            init('./mov_bbb.mp4')
        }

        function init(s) {
            src = s
            if(!video)video = videoDom
            video.src = src;
            video.play()
                .then(() => {
                })
                .catch(err => {
                    console.error(err);
                    videoPause();
                });
        }


        function canplay(e) {
            let v = e.target;
            duration = formatterTime(v.duration);
            max = parseInt(v.duration * 1000);
            video = v;
            console.log('canplay',max);
        }

        function timeupdate(e) {
            currentTime = formatterTime(e.target.currentTime);
            value = parseInt(e.target.currentTime * 1000);
            console.log('timeupdate',e.target.currentTime,max,`${currentTime}:${duration}`);
            // 更新进度条
            slideProcess(value)
        }
        function videoPause() {
            if (video) {
                video.pause();
            }
        }
        function videoEnded() {
        }

        function videoError() {
            if (src) {
                videoPause();
            }
        }

        function videoProgress(e) {
            if( e.target.buffered.length  > 0 ){
                // console.log('videoProgress-加载进度', e.target.buffered.end(0) );
                let v = e.target.buffered.end(0) * 1000
                progressDom.style.width = ( v / max) * 100 + '%'
            }
            
        }

        function slideProcess(v) {
            // console.log('slideProcess',max);
            v = v >= max ? max : v
            slideInsideDom.style.width = (v / max) * 100 + '%'
            pointBoxDom.style.left = (v / max) * 100 + '%'
        }

        function formatterTime(time) {
            let minute = parseInt(time / 60);
            let seconds = parseInt(time - minute * 60);
            minute = minute < 10 ? "0" + minute : minute;
            seconds = seconds < 10 ? "0" + seconds : seconds;
            return `${minute}:${seconds}`;
        }

        // ----------------------- 进度条操作 -------------------------------
        // 监听进度条鼠标按下
        function mousedownFun(e) {
            setPosition(e)
            console.log('进度条鼠标按下', e.clientX, slideDom.offsetLeft);
            document.addEventListener('mousemove', mousemoveFun)
        }
        // 鼠标按下监听全局移动
        function mousemoveFun(e) {
            e = e || window.event;
            pauseEvent(e);
            setPosition(e);
            console.log('拖拽移动',);
        }
        // 全局监听鼠标抬起
        function mouseupFun(e) {
            console.log('鼠标抬起', e.clientX);
            document.removeEventListener('mousemove', mousemoveFun)
        }
        function setPosition(e) {
            let x = e.clientX - slideDom.offsetLeft
            x = x < 0 ? 0 : x
            x = x >= extent ? extent : x
            slideInsideDom.style.width = (x / extent) * 100 + '%'
            pointBoxDom.style.left = (x / extent) * 100 + '%'
            // 新增如下代码
            if(video && max){
                video.currentTime = x / extent * max / 1000
            }
        }

        //阻止事件冒泡
        //不仅仅要stopPropagation，还要preventDefault
        function pauseEvent(e) {
            if (e.stopPropagation) e.stopPropagation();
            if (e.preventDefault) e.preventDefault();
            e.cancelBubble = true;
            e.returnValue = false;
            return false;
        }

    </script>
</body>

</html>

Wu Youlu
关注
自定义video标签进度条
dengzhuanhu2252的博客
08-11 1195
<!doctype html> <html> <head> <meta charset="utf-8"> <title>短视频</title> <style lang="en"> html, body{ ...
给video添加自定义进度条
weixin_30267697的博客
01-29 1542
思路： 　　1.进度条，首先要知道视频的总长度，和视频的当前进度，与其对应的便是进度条的总长度和当前的长度，两者比值相等 　　2.获取视频的总长度（单位是秒），获取当前进度 　　3.要实现的功能，首先是进度条根据视频播放的进度，不断的增加。意思就是不断的获取视频的当前进度，然后去除以视频的总长度，拿这个比值乘以进度条的总长度，就得到经度条当前的长度，赋值。 　　4.拖动经度条，视频在相应的...
html5 audio demo【修复拖动进度条bug】
07-06
html5 audio自定义样式以及播放控制demo。以前那个有bug，csdn太坑不能删除或者修改，只能重新上传一个了
audio标签的使用（实现音乐的进度条功能）
qq_41888962的博客
09-29 4854
1.前端页面 链接：https://pan.baidu.com/s/1Ntc0lSY1-ceYS1Oww3v5_w 提取码：rqaw 2.jQuery实现步骤 初始化audio元素 //定义一个全局变量，用来存储公用数据 var rem = [] // 初始化函数 function initAudio(){ // 在body标签中添加音乐标签 rem.audio=$(`<audio src="song/1.mp3" controls="controls" ></audio>
HTML5 视频音频播放器 - Player 完整开发指南
最新发布
weixin_42389113的博客
10-08 861
本文还有配套的精品资源，点击获取 简介：HTML5 作为先进的 web 开发标准，在多媒体内容嵌入方面超越了传统插件技术。本文介绍了一个名为 Player 的 HTML5 视频音频播放器，它通过 JavaScript 提供丰富的交互功能和用户定制选项。Player 播放器支持播放/暂停、音量控制、进度条控制、全屏切换、播放状态反馈等核心功能，并具备格式兼容性检测和字幕支持。...
html5 如何自制video标签的播放进度条
cuoban的学习空间
04-10 9756
现在随着html5的渐热，越来越多的web开发者都开始选择使用html5写出一些比较好的web应用。我也相信html5在未来会有很大的发展前景，额，跑题了，继续说我们这个问题。闲话不多说，先上代码下面是JavaScript代码// 为了不随意的创建全局变量，我们将我们的代码放在一个自己调用自己的匿名函数中，这是一个好的编程习惯 (function(window, document)...
HTML5 媒体播放器 video、audio 自定义播放器进度条（上）
m0_67793437的博客
06-13 1292
当使用到 HTML5 媒体播放器（>），往往有许多自定义的需求，其中。
带进度条的播放器（样式可以自定义）
09-11
带进度条的播放器（样式可以自定义），播放按钮和暂停按钮样式自定义 进度条样式自定义
自定义 视频/音频 进度条
html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中...
08-10 1218
复制代码根据自己需求改动就可以了。
vue-audio-better-易于为Vue 2.x创建自定义音频播放器组件。 有灵魂的进度条。-Vue.js开发
05-27
vue-audio-better Easy to create custom audio player components for Vue.js. 一个有灵魂的进度条。 A progress bar with soul. 简单、有趣的 audio 组件，非常感谢您的 star! Simple, f vue-audio-better Easy...
html5 audio js控制进度,HTML5多媒体的之audio和video。JavaScript控制进度条播放进度
weixin_42151772的博客
06-07 1312
使用HTML5多媒体，audio和video两个元素可以让用户不必借助flash player插件即可播放音频和视频。小知识：视频文件包含了音频轨道，视频轨道和其他一些元数据。当我们播放视频的时候，音频轨道和和视频轨道是绑定在一起同步播放的。元数据部分包含了视频的封面，标题，子标题，字幕等相关信息。一.使用audio元素HTML5中的audio是用来播放声音文件的，支持ogg Vorbis , M...
HTML5播放器
04-22
一款HTML5的播放器、兼容多种浏览器、IE 、 谷歌 、火狐等
html5基于video的视频播放器
04-11
html5基于video属性制作的视频播放器代码内置三种皮肤，可以修改控制按钮的颜色，遮罩层透明度和视频封面等
HTML5 官方播放器
08-30
灰常牛X的播放器源码，灰常值得大家参考学习
html5实现的视频播放器
10-09
html5实现的视频播放器,非常 实用，非常简单，替换视频文件路径即可使用，html5实现的视频播放器,非常 实用，非常简单，替换视频文件路径即可使用。
HTML5的视频播放器Html5VideoPlayer.zip
07-19
支持 双击全屏支持 左右键控制播放进度支持 开关灯控制说明配置vWidth 控件宽vHeight 控件高vSrc 视频地址vZIndex z-index,默认100vShowLightSwitch 是否显示开关灯按钮回调GetInfo 获取信息GetVolume 获取音量GetCurrentTime 获取当前播放的时间返回对象SetCurrentTime 设置当前播放的时间SetVolume 设置音量SetMuted 设置静音SetPause 设置暂停SetPlay 设置播放运行效果
从零实现一个自定义html5播放器的示例代码
09-27
HTML5提供了`<video>`和`<audio>`标签，用于嵌入媒体内容。自定义播放器通常围绕这些标签进行开发。通过设置`controls`属性，可以在浏览器内显示默认控制条。如果要实现自定义控制，则需要通过CSS隐藏这些默认控件，...
小程序视频或音频自定义可拖拽进度条的示例代码
10-17
在本示例代码中，涉及到了几个关键点，它们分别对应了实现可拖拽进度条的基本步骤，这些步骤包括：使用小程序的`<video>`或`<audio>`组件展示视频或音频播放器界面；通过监听`bindtimeupdate`事件来更新进度条状态；...
如何封装个video插件。自定义进度条点击拖拽，播放暂停，播放倍速
tree_ge的博客
12-15 2159
vue3开发嵌入式，播放器在浏览器中是正常的。但嵌入到app里，app不适配，无法全屏，无法设置倍速，controls在视频播放时点击视频无法弹出。
HTML5多媒体要素：Video与Audio元素的运用
它涵盖了HTML5 Media的Video和Audio元素、拖拽操作、获取位置信息以及利用Google地图获取地理位置。教程旨在使开发者了解如何在HTML5环境中更便捷地集成多媒体功能，减少对第三方插件如Flash的依赖。" 在HTML5中，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值