H5 audio 音频标签自定义样式修改以及添加播放控制事件

最新推荐文章于 2024-09-13 10:11:04 发布
最新推荐文章于 2024-09-13 10:11:04 发布
阅读量2.7w 收藏 113
点赞数 20
分类专栏： 前端 文章标签： html5 audio
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dandelion_drq/article/details/77645659
版权

20181023 更新
原来的代码拖动进度点只写了mouse事件，手机端的话应该是touch事件。所以出现了有朋友说的移动端无法拖动进度条的问题。现在更新的代码已经加上touch事件，即无论是手机模式浏览，还是PC模式浏览都可以拖动进度点来调节音频播放进度。完整代码也已经放上码云，需要的同学可以自行下载。

说明：

需求要求这个音频标签首先要是可适配移动端浏览器的，音频样式就是参考微信做的。

最终效果如下：

具体实现

思路：

H5 的 <audio> 标签是由浏览器负责实现默认样式的。所以不同的浏览器样式不一样，有些还不太美观。所以我们一般会去掉默认样式，自己重新写。具体操作是定义 <audio> 的时候去掉 controls 属性，这样就可以隐藏原生的 audio， 然后就可以加上自己写的 html + css 代码了。最后用 js 捕获 audio 对象，为它添加各种播放控制事件。

1. 定义标签

这个很简单，就是用H5 <audio> 标签定义音频的方式。

html 代码：

<div class="audio-wrapper">
    <audio>
        <source src="Files/Audio/2017-08/e259d760-5f1a-4ae0-a838-34d237ea93cc.mp3" type="audio/mp3">
    </audio>
    <div class="audio-left">![](image/play.png)</div>
    <div class="audio-right">
        <p style="max-width: 536px;">Beta-B_Kan R. Gao.mp3</p>
        <div class="progress-bar-bg" id="progressBarBg"><span id="progressDot"></span>
            <div class="progress-bar" id="progressBar"></div>
        </div>
        <div class="audio-time"><span class="audio-length-current" id="audioCurTime">00:00</span><span class="audio-length-total">01:06</span></div>
    </div>
</div>

css 代码：

.audio-wrapper {
    background-color: #fcfcfc;
    margin: 10px auto;
    max-width: 670px;
    height: 70px;
    border: 1px solid #e0e0e0;
}

.audio-left {
    float: left;
    text-align: center;
    width: 18%;
    height: 100%;
}

.audio-left img {
    width: 40px;
    position: relative;
    top: 15px;
    margin: 0;
    display: initial;   /* 解除与app的样式冲突 */
    cursor: pointer;
}

.audio-right {
    margin-right: 2%;
    float: right;
    width: 80%;
    height: 100%;
}

.audio-right p {
    font-size: 15px;
    height: 35%;
    margin: 8px 0;

    /* 歌曲名称只显示在一行，超出部分显示为省略号 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 243px;   /* 要适配小屏幕手机，所以最大宽度先设小一点，后面js根据屏幕大小重新设置 */    
}

.progress-bar-bg {
    background-color: #d9d9d9;
    position: relative;
    height: 2px;
    cursor: pointer;
}

.progress-bar {
    background-color: #649fec;
    width: 0;
    height: 2px;
}

.progress-bar-bg span {
    content: " ";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #3e87e8;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -5px;
    margin-left: -5px;
    cursor: pointer;
}

.audio-time {
    overflow: hidden;
    margin-top: -1px;
}

.audio-length-total {
    float: right;
    font-size: 12px;
}

.audio-length-current {
    float: left;
    font-size: 12px;
}
2. 添加播放控制事件
  • 获取音频对象
var audio = document.getElementsByTagName('audio')[0];
  • 播放/暂停控制
    // 点击播放/暂停图片时，控制音乐的播放与暂停
    var audioPlayer = document.getElementById('audioPlayer');
    audioPlayer.addEventListener('click', function () {
        // 改变播放/暂停图片
        if (audio.paused) {
            audio.play();
            audioPlayer.src = './image/pause.png';
        } else {
            audio.pause();
            audioPlayer.src = './image/play.png';
        }
    }, false);
  • 更新进度条与当前播放时间
// 监听音频播放时间并更新进度条
audio.addEventListener('timeupdate', function () {
    updateProgress(audio);
}, false);

/**
 * 更新进度条与当前播放时间
 * @param {object} audio - audio对象
 */
function updateProgress(audio) {
    var value = audio.currentTime / audio.duration;
    document.getElementById('progressBar').style.width = value * 100 + '%';
    document.getElementById('progressDot').style.left = value * 100 + '%';
    document.getElementById('audioCurTime').innerText = transTime(audio.currentTime);
}

/**
 * 音频播放时间换算
 * @param {number} value - 音频当前播放时间，单位秒
 */
function transTime(value) {
    var time = "";
    var h = parseInt(value / 3600);
    value %= 3600;
    var m = parseInt(value / 60);
    var s = parseInt(value % 60);
    if (h > 0) {
        time = formatTime(h + ":" + m + ":" + s);
    } else {
        time = formatTime(m + ":" + s);
    }

    return time;
}

/**
 * 格式化时间显示，补零对齐
 * eg：2:4  -->  02:04
 * @param {string} value - 形如 h:m:s 的字符串 
 */
function formatTime(value) {
    var time = "";
    var s = value.split(':');
    var i = 0;
    for (; i < s.length - 1; i++) {
        time += s[i].length == 1 ? ("0" + s[i]) : s[i];
        time += ":";
    }
    time += s[i].length == 1 ? ("0" + s[i]) : s[i];

    return time;
}
  • 播放完成时把进度调回开始的位置
// 监听播放完成事件
audio.addEventListener('ended', function () {
    audioEnded();
}, false);

/**
 * 播放完成时把进度调回开始的位置
 */
function audioEnded() {
    document.getElementById('progressBar').style.width = 0;
    document.getElementById('progressDot').style.left = 0;
    document.getElementById('audioCurTime').innerText = transTime(0);
    document.getElementById('audioPlayer').src = './image/play.png';
}
3. 添加进度调节事件
  • 点击进度条跳到指定位置播放
    // 点击进度条跳到指定点播放
    // PS：此处不要用click，否则下面的拖动进度点事件有可能在此处触发，此时e.offsetX的值非常小，会导致进度条弹回开始处（简直不能忍！！）
    var progressBarBg = document.getElementById('progressBarBg');
    progressBarBg.addEventListener('mousedown', function (event) {
        // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
        if (!audio.paused || audio.currentTime != 0) {
            var pgsWidth = parseFloat(window.getComputedStyle(progressBarBg, null).width.replace('px', ''));
            var rate = event.offsetX / pgsWidth;
            audio.currentTime = audio.duration * rate;
            updateProgress(audio);
        }
    }, false);
  • 拖动进度条到指定位置播放
/**
 * 鼠标拖动进度点时可以调节进度
 * @param {*} audio
 */
function dragProgressDotEvent(audio) {
    var dot = document.getElementById('progressDot');

    var position = {
        oriOffestLeft: 0, // 移动开始时进度条的点距离进度条的偏移值
        oriX: 0, // 移动开始时的x坐标
        maxLeft: 0, // 向左最大可拖动距离
        maxRight: 0 // 向右最大可拖动距离
    };
    var flag = false; // 标记是否拖动开始

    // 鼠标按下时
    dot.addEventListener('mousedown', down, false);
    dot.addEventListener('touchstart', down, false);

    // 开始拖动
    document.addEventListener('mousemove', move, false);
    document.addEventListener('touchmove', move, false);

    // 拖动结束
    document.addEventListener('mouseup', end, false);
    document.addEventListener('touchend', end, false);

    function down(event) {
        if (!audio.paused || audio.currentTime != 0) { // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
            flag = true;

            position.oriOffestLeft = dot.offsetLeft;
            position.oriX = event.touches ? event.touches[0].clientX : event.clientX; // 要同时适配mousedown和touchstart事件
            position.maxLeft = position.oriOffestLeft; // 向左最大可拖动距离
            position.maxRight = document.getElementById('progressBarBg').offsetWidth - position.oriOffestLeft; // 向右最大可拖动距离

            // 禁止默认事件（避免鼠标拖拽进度点的时候选中文字）
            if (event && event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }

            // 禁止事件冒泡
            if (event && event.stopPropagation) {
                event.stopPropagation();
            } else {
                window.event.cancelBubble = true;
            }
        }
    }

    function move(event) {
        if (flag) {
            var clientX = event.touches ? event.touches[0].clientX : event.clientX; // 要同时适配mousemove和touchmove事件
            var length = clientX - position.oriX;
            if (length > position.maxRight) {
                length = position.maxRight;
            } else if (length < -position.maxLeft) {
                length = -position.maxLeft;
            }
            var progressBarBg = document.getElementById('progressBarBg');
            var pgsWidth = parseFloat(window.getComputedStyle(progressBarBg, null).width.replace('px', ''));
            var rate = (position.oriOffestLeft + length) / pgsWidth;
            audio.currentTime = audio.duration * rate;
            updateProgress(audio);
        }
    }

    function end() {
        flag = false;
    }
}

最后总的 js 代码如下：

document.addEventListener('DOMContentLoaded', function () {
    // 设置音频文件名显示宽度
    var element = document.querySelector('.audio-right');
    var maxWidth = window.getComputedStyle(element, null).width;
    document.querySelector('.audio-right p').style.maxWidth = maxWidth;

    // 初始化音频控制事件
    initAudioEvent();
}, false);

function initAudioEvent() {
    var audio = document.getElementsByTagName('audio')[0];
    var audioPlayer = document.getElementById('audioPlayer');

    // 点击播放/暂停图片时，控制音乐的播放与暂停
    audioPlayer.addEventListener('click', function () {
        // 监听音频播放时间并更新进度条
        audio.addEventListener('timeupdate', function () {
            updateProgress(audio);
        }, false);

        // 监听播放完成事件
        audio.addEventListener('ended', function () {
            audioEnded();
        }, false);

        // 改变播放/暂停图片
        if (audio.paused) {
            // 开始播放当前点击的音频
            audio.play();
            audioPlayer.src = './image/pause.png';
        } else {
            audio.pause();
            audioPlayer.src = './image/play.png';
        }
    }, false);

    // 点击进度条跳到指定点播放
    // PS：此处不要用click，否则下面的拖动进度点事件有可能在此处触发，此时e.offsetX的值非常小，会导致进度条弹回开始处（简直不能忍！！）
    var progressBarBg = document.getElementById('progressBarBg');
    progressBarBg.addEventListener('mousedown', function (event) {
        // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
        if (!audio.paused || audio.currentTime != 0) {
            var pgsWidth = parseFloat(window.getComputedStyle(progressBarBg, null).width.replace('px', ''));
            var rate = event.offsetX / pgsWidth;
            audio.currentTime = audio.duration * rate;
            updateProgress(audio);
        }
    }, false);

    // 拖动进度点调节进度
    dragProgressDotEvent(audio);
}

/**
 * 鼠标拖动进度点时可以调节进度
 * @param {*} audio
 */
function dragProgressDotEvent(audio) {
    var dot = document.getElementById('progressDot');

    var position = {
        oriOffestLeft: 0, // 移动开始时进度条的点距离进度条的偏移值
        oriX: 0, // 移动开始时的x坐标
        maxLeft: 0, // 向左最大可拖动距离
        maxRight: 0 // 向右最大可拖动距离
    };
    var flag = false; // 标记是否拖动开始

    // 鼠标按下时
    dot.addEventListener('mousedown', down, false);
    dot.addEventListener('touchstart', down, false);

    // 开始拖动
    document.addEventListener('mousemove', move, false);
    document.addEventListener('touchmove', move, false);

    // 拖动结束
    document.addEventListener('mouseup', end, false);
    document.addEventListener('touchend', end, false);

    function down(event) {
        if (!audio.paused || audio.currentTime != 0) { // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
            flag = true;

            position.oriOffestLeft = dot.offsetLeft;
            position.oriX = event.touches ? event.touches[0].clientX : event.clientX; // 要同时适配mousedown和touchstart事件
            position.maxLeft = position.oriOffestLeft; // 向左最大可拖动距离
            position.maxRight = document.getElementById('progressBarBg').offsetWidth - position.oriOffestLeft; // 向右最大可拖动距离

            // 禁止默认事件（避免鼠标拖拽进度点的时候选中文字）
            if (event && event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }

            // 禁止事件冒泡
            if (event && event.stopPropagation) {
                event.stopPropagation();
            } else {
                window.event.cancelBubble = true;
            }
        }
    }

    function move(event) {
        if (flag) {
            var clientX = event.touches ? event.touches[0].clientX : event.clientX; // 要同时适配mousemove和touchmove事件
            var length = clientX - position.oriX;
            if (length > position.maxRight) {
                length = position.maxRight;
            } else if (length < -position.maxLeft) {
                length = -position.maxLeft;
            }
            var progressBarBg = document.getElementById('progressBarBg');
            var pgsWidth = parseFloat(window.getComputedStyle(progressBarBg, null).width.replace('px', ''));
            var rate = (position.oriOffestLeft + length) / pgsWidth;
            audio.currentTime = audio.duration * rate;
            updateProgress(audio);
        }
    }

    function end() {
        flag = false;
    }
}

/**
 * 更新进度条与当前播放时间
 * @param {object} audio - audio对象
 */
function updateProgress(audio) {
    var value = audio.currentTime / audio.duration;
    document.getElementById('progressBar').style.width = value * 100 + '%';
    document.getElementById('progressDot').style.left = value * 100 + '%';
    document.getElementById('audioCurTime').innerText = transTime(audio.currentTime);
}

/**
 * 播放完成时把进度调回开始的位置
 */
function audioEnded() {
    document.getElementById('progressBar').style.width = 0;
    document.getElementById('progressDot').style.left = 0;
    document.getElementById('audioCurTime').innerText = transTime(0);
    document.getElementById('audioPlayer').src = './image/play.png';
}

/**
 * 音频播放时间换算
 * @param {number} value - 音频当前播放时间，单位秒
 */
function transTime(value) {
    var time = "";
    var h = parseInt(value / 3600);
    value %= 3600;
    var m = parseInt(value / 60);
    var s = parseInt(value % 60);
    if (h > 0) {
        time = formatTime(h + ":" + m + ":" + s);
    } else {
        time = formatTime(m + ":" + s);
    }

    return time;
}

/**
 * 格式化时间显示，补零对齐
 * eg：2:4  -->  02:04
 * @param {string} value - 形如 h:m:s 的字符串 
 */
function formatTime(value) {
    var time = "";
    var s = value.split(':');
    var i = 0;
    for (; i < s.length - 1; i++) {
        time += s[i].length == 1 ? ("0" + s[i]) : s[i];
        time += ":";
    }
    time += s[i].length == 1 ? ("0" + s[i]) : s[i];

    return time;
}

参考：

音频（audio）自定义样式以及控制操作面板
HTML5中 audio标签的样式修改

完整代码

https://gitee.com/Dandelion_/html_demo/tree/master/H5-audio

Dandelion_drq
关注
专栏目录
Html5 audio标签样式的修改
09-28
主要介绍了Html5标签audio的样式修改 ,对html5 audio标签样式相关知识感兴趣的朋友一起学习吧
H5 <audio> 音频标签自定义样式修改以及添加播放控制事件
weixin_30889885的博客
05-23 768
说明： 需求要求这个音频标签首先要是可适配移动端浏览器的，音频样式就是参考微信做的。 最终效果如下： 具体实现 思路： H5 的 <audio> 标签是由浏览器负责实现默认样式的。所以不同的浏览器样式不一样，有些还不太美观。所以我们一般会去掉默认样式，自己重新写。具体操作是定义 <audio> 的时候去掉 controls 属性，这...
h5音乐播放器，自定义外观。（纯原生）
最新发布
lucklyff的博客
09-13 666
选型思路，首先三件套是基础，vue2主要是因为公司的项目比较老旧，所以没有选择最新的vue3框架，后期会考虑往vue3迁徙。主要是因为手写一个进度条太浪费时间，而且实现进度条的技术难度很低，自己实现一个进度条可以说是既浪费时间又没有什么提升。none表示不进行预加载，metadata表示不进行预加载但会获取进度长度，auto表示对资源进行预加载。进度条可拖拽，可暂停播放，可调整音量。这个音乐播放器是基于简单需求进行开发的，后期应该不会再升级更复杂的功能，此播放器的开发被我暂停在了1.0初级版本。
audio标签的样式修改
@宝藏男孩
08-19 5634
由于html5的流行，现在移动端大多数的需求都可以使用audio来播放音频，但您可能只是需要很简单的播放/停止效果，但不同的浏览器上的audio样式却不尽人意，那么要怎么改变这个样式呢，其实它的原理比较简单，就是把写audio的时候不要用controls属性，隐藏原生的audio， 然后用div之类标签，定义css样式美化起来用来显示播放器的效果，最后用js捕获audio事件，基本就是src路径、pause暂停、load加载、play播放这些。下面是audio标签的一些相关API： 控制函数功能说明 lo
audio标签样式修改
tianming229的博客
11-26 4115
效果展示 上代码 html: <div class="audio-box"> <audio id="audioTag" src="music/tonghuazhen.mp3"></audio> <div class="a-progress"> <span class="played-time" id="playedTime">00:00</span> <div class="pgs-total">
使用 CSS 和 WebKit 属性设置 HTML5 `＜audio＞` 标签的样式
我的博客，不一样的自我表达
08-05 3504
虽然标签本身不提供特定的 WebKit 样式属性，但您可以利用标准 CSS 以及特定于 WebKit 的属性来自定义音频播放器的外观，以符合您的设计美学。总之，虽然 HTML5标签不提供专用的 WebKit 样式属性，但您可以使用标准 CSS 以及各种特定于 WebKit 的选择器为音频播放器实现自定义且精美的外观。尝试不同的样式和属性来创建与您的网站设计无缝集成的音频播放器。-webkit-media-controls-volume-slider-container：设置音量滑块容器的样式。
【vue】【audio】audio标签播放样式改写
mooonyuan的博客
02-16 863
audio标签播放样式改写
html-audio标签样式重写思路
YogaMiller的博客
04-25 706
搭配slider 组件 ,利用原生audio的属性和方法重写样式。
完美解决audio自定义修改样式。完整demo，可直接复用copy。修改默认样式
qq_42780323的博客
12-29 7369
这个是完整demo，可以复用。请把代码直接复制，打开页面查看效果更好。知识点在下方。 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>样式修改</title&...
浅谈h5自定义audio(问题及解决)
09-27
在H5页面中，自定义音频播放体验是一个常见的需求，特别是在制作互动性强的网页或游戏中。本文主要讨论了如何在H5中自定义`audio`元素，并解决在不同设备上出现的问题。 首先，HTML5的`<audio>`标签是用于嵌入音频...
vueAudiocustomStylepalyer一个audio标签自定义样式的vue组件
08-10
vueAudio-customStyle-palyer, 一个audio标签自定义样式的vue组件
自定义audio音频样式
06-01
jQuery自定义audio音频样式，包括功能。
react-h5-audio-player:用UIReact音频播放器组件。 它在台式机和移动设备上提供时间指示器
05-12
React H5音频播放器 音频播放器组件，可在不同的浏览器上提供一致的UI / UX。 超级可定制的布局 带有SVG图标的Flexbox CSS。 移动友好。 支持辅助功能，支持键盘事件。 支持媒体源扩展（MSE）和加密媒体扩展...
html5自定义音频播放界面
01-19
在`<audio>`标签内，可以设置`src`属性来指定音频文件的路径，如`<audio src="我爱你胜过你爱我.mp3"></audio>`。此外，还可以通过添加`controls`属性来显示默认的播放、暂停和音量控制。 2. **Audio API**： ...
html控制多个音频audio css,vue中<audio>自定义样式（页面中包含多个audio）
weixin_30869777的博客
06-16 1097
前言一开始看到UI设计稿，我内心是十分抗拒的。觉得用原生audio的样式就可以了，也不是特别丑，毕竟时间给的不多，自定义样式还要改逻辑啥的。在网上搜索了一番有没有合适的插件，没有看到心动的。最后还是硬着头皮自己写了。参考了一个博客，很感谢这位博主，逻辑都可以用。不过原博用的jquery，我自己用vue，而且我的页面可能有不止一个audio，设计稿和原博也很不一样，所以改代码还是花了一番心思。我这里...
css 修改audio标签样式
momo_mom177的博客
04-19 8647
今天拿到一个需求是做一个音频播放器，因为UI图与原本的样式就很像，所以直接改原本的样式就可以了，看到有很多大佬是自己写样式然后用js获取音频的各种事件方法，控制样式 html5 audio样式修改,HTML5中 audio的样式设置_只吃回头草的博客-CSDN博客直接在样式表中设置对应的样式：audio::-webkit-media-controls-panelaudio::-webkit-media-controls-mute-buttonaudio::-webkit-media-controls-pl
HTML5中 audio标签的样式修改
孤城幻夜
06-09 1622
博文地址：http://www.jzdlink.com/webarticle/css/20161124906.html
WebAPP开发——H5标签audio（属性和API事件）
吴小花的博客
02-20 3126
1.audio支持的格式 audio 定义音频 格式：mp3 wav ogg mp3所有浏览器兼容 ogg safari不支持 wav 都支持 js 能帮助生成audio对象 new Audio(); 等同于HTML上面写上audio标签 chrom和Opera都不能直接播放 需要页面上元素交互 <button id='btn'>播放</button&gt...
h5 video 带自定义控制条的和播放速度
06-13
好的，针对您的问题，我提供如下回答： 1. 带自定义控制条的H5视频播放器 HTML5的video标签提供了默认的视频播放控件，但是这些控件样式相对简单，如果需要自定义控制条，可以使用JavaScript和CSS来实现。下面是一个简单的示例代码： HTML代码： ``` <video id="myVideo" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support the video tag. </video> ``` JavaScript代码： ``` var video = document.getElementById("myVideo"); var playBtn = document.getElementById("playBtn"); var progressBar = document.getElementById("progressBar"); function togglePlay() { if (video.paused) { video.play(); playBtn.innerHTML = "Pause"; } else { video.pause(); playBtn.innerHTML = "Play"; } } function updateProgressBar() { var progress = (video.currentTime / video.duration) * 100; progressBar.style.width = progress + "%"; } video.addEventListener("play", function() { playBtn.innerHTML = "Pause"; }); video.addEventListener("pause", function() { playBtn.innerHTML = "Play"; }); video.addEventListener("timeupdate", updateProgressBar); playBtn.addEventListener("click", togglePlay); ``` CSS代码： ``` #myVideo { width: 640px; height: 360px; } #playBtn { background-color: #333; color: #fff; padding: 10px; border: none; border-radius: 5px; cursor: pointer; } #progressBarContainer { background-color: #ccc; height: 10px; margin-top: 10px; } #progressBar { background-color: #333; height: 100%; width: 0; } ``` 2. H5视频播放器的播放速度控制 HTML5的video标签提供了playbackRate属性，可以用来设置视频的播放速度。下面是一个简单的示例代码： HTML代码： ``` <video id="myVideo" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support the video tag. </video> <button id="slowBtn">Slow</button> <button id="normalBtn">Normal</button> <button id="fastBtn">Fast</button> ``` JavaScript代码： ``` var video = document.getElementById("myVideo"); var slowBtn = document.getElementById("slowBtn"); var normalBtn = document.getElementById("normalBtn"); var fastBtn = document.getElementById("fastBtn"); function setPlaybackRate(rate) { video.playbackRate = rate; } slowBtn.addEventListener("click", function() { setPlaybackRate(0.5); }); normalBtn.addEventListener("click", function() { setPlaybackRate(1); }); fastBtn.addEventListener("click", function() { setPlaybackRate(2); }); ``` CSS代码： ``` #myVideo { width: 640px; height: 360px; } button { background-color: #333; color: #fff; padding: 10px; border: none; border-radius: 5px; cursor: pointer; margin-right: 10px; } ``` 以上是我提供的回答，希望能对您有所帮助。
评论 23
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值