自定义进度条音量DOME&音频处理&本地存储

最新推荐文章于 2022-02-15 14:30:32 发布

世间百态不过尔尔

最新推荐文章于 2022-02-15 14:30:32 发布

阅读量796

点赞数

分类专栏： web(HTML5) 文章标签：自定义进度条音量DOME&音频处理&本地存储

本文链接：https://blog.csdn.net/weixin_44706842/article/details/88543550

版权

web(HTML5) 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="jquery-3.1.1.js"></script>
</head>
<body>
    <video src="movie.mp4" controls=""></video>
    <!-- 自定义实现视频控制工具，可以暂停、播放、快进(滑块进行调整)、显示进度（进度条显示）、显示总时间以及当前前时间（当前时间/总时间）、可以通过滑块调整音量大小 -->
    <input type="button" value="播放" onclick="start()">
    <input type="button" value="暂停" onclick="stop()">
    <br>
    <input type="range" id="range" value="0" onchange="setStartTime()"><label id="time"></label>
    <br>
    音量：<input type="range" onchange="setVoice(this)" value="50" max="100" id="v">

    <script>
        // 先获取video元素对象
        var m = $("video")[0];

        //为视频元素绑定时间，当视频可以完全播放时，设置滑块的最大值为视频总时长
        m.oncanplaythrough = function(){
            $("#range").attr("max",m.duration);
            $("#time").text(parseInt(m.currentTime)+"/"+parseInt(m.duration));
            $("#v").val(m.volume*100);
        }

        // 播放按钮
        function start() {
            // 判断视频是否在播放
            if (m.paused) {//如果m.paused为true，表示未播放
                m.play();
                setProgress();
            }
        }

        // 暂停按钮
        function stop(){
            // 判断当前是否在播放
            if (!m.paused) {//如果在播放，m.paused为false，!m.paused为true
                m.pause();
                if (timer) {
                    clearInterval(timer);
                    timer = null;
                }
            }
        }

        // 快进滑块
        function setStartTime(){
            // 将视频播放的时间与滑块的值进行绑定
            m.currentTime = $("#range").val();
            $("#time").text(parseInt(m.currentTime)+"/"+parseInt(m.duration));

        }
        //声明定时器，用来设置滑块的值跟随视频播放进度
        var timer = null;

        // 定义获取进度的函数
        function setProgress(){
            if (!timer) {
                timer = setInterval(function(){
                    $("#range").val(m.currentTime);
                    $("#time").text(parseInt(m.currentTime)+"/"+parseInt(m.duration));
                    if (m.ended) {
                        clearInterval(timer);
                        timer = null;
                    }
                },100);
            }
        }

        // 音量
        function setVoice(r){
            m.volume = r.value/100;
        }
    </script>
</body>
</html>

一、音频处理
1、audio元素
该元素主要实现在html页面中插入音频，可以实现音频的播放、暂停、音量控制等，支持mp3/ogg/wav格式的音频
语法：

2、常用属性
-src：音频文件的路径
-controls：音频控制条
-autoplay：自动播放
-loop：循环播放

3、事件（参照video）
4、dom对象属性（参照video）
5、处理函数（参照video）

二、web存储
1、cookie
浏览器的缓存，用于将用户信息或其他需要临时存储的数据保存在浏览器本地，可以供同一站点的其他网页访问

2、本地存储
HTML5提供了web本地存储的API，它是在cookie的基础上做了增强，允许开发者将数据保存在用户的硬盘上，可以相互使用

本地存储的API可以分为两类：
-信息必须且只在回话过程中保存和使用（网页关闭后，数据就会被删除）——sessionStorage
-信息可以长期保存在本地，可以由用户决定时长——localStorage

3、sessionStorage
该存储使用单个窗口作为引用，一旦窗口关闭，该存储将不能再使用
1）创建数据
本地存储是将数据存储为项，每项采取键值对的形式保存
-sessionStorage.setItem(键,值)；
2）获取数据
-sessionStorage.getItem(键);获取指定键对应的值
-key(下标); 获取指定下标的键
3)属性
-length：返回应用程序在存储空间中保存的项的数量
4）删除数据
-removeItem(键); 删除指定键对应的项
-clear(); 清空整个存储空间

4、localStorage
    该存储方式可以将数据进行长期的存储，可以由用户决定信息是否保存或保存多久，且可以保存较大的数据，localStorage和sessionStorage有相同的方法和属性

    注意：用于localStorage是向加载同源文件的所有窗口提供信息，所以需要考虑不同页面间的通信，为了处理此情况，H5提供了storage事件，当存储空间发生改变时，都会触发这个事件，注意，必须是同源
    语法：
    window.addEventListener('storage',function(e){
        console.log(e.newValue);  //此处的e.newValue就表示最新存储的内容
    });

    localStorage常用于保存用户的用户名、登录状态、个人信息之类的

世间百态不过尔尔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自定义进度条音量DOME&音频处理&本地存储

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;script src="jquery-3.1.1.js"&gt;&lt;/script&gt;&am
复制链接

扫一扫