自定义音视频控件

云杰8了

于 2021-04-21 19:49:00 发布

阅读量307

点赞数 1

分类专栏： h5音视频控件前端入门案例文章标签： html5

本文链接：https://blog.csdn.net/weixin_50821119/article/details/115973858

版权

前端入门案例同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

h5音视频控件

1 篇文章 0 订阅

订阅专栏

自定义音视频控件

效果图如下

在这里插入图片描述

实现原理

在此你需要知道以下原理

音视频标签对象的属性和方法：

都是DOM对象的属性和方法

1, 方法：`play()` `pause()`

play()开始播放视频。
pause() 暂停当前播放的视频。

2. 属性： `currentTime` `duration`

currentTime 设置或返回视频中的当前播放位置（以秒计）。
duration 返回视频的长度（以秒计）。

3. 事件：

canplay事件 :浏览器能够开始播放指定的音频/视频时，发生 canplay 事件。
timeupdate事件：timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发。
该事件可以在以下情况被调用:
播放音频/视频（audio/video）
移动音频/视频（audio/video）播放位置

4. 音量的控制

volume 设置或返回视频的音量。取值： 0 - 1

问题分析

点击开始和暂停按钮，视频开始播放
点击进度条，视频播放到对应的时间，并且进度条加载到鼠标点击位置，同时视频播放时间发生变化。
拖动进度条视频播放指定位置，视频播放时间发生变化，进度条发生变化
点击全屏播放，视频全屏播放

代码如下


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2502427_wfmwovkdenj.css">
    <style>
        .wrap video {
            width: 300px;
        }

        .container {
            width: 800px;
            height: 432px;
            border: 1px solid red;
            position: relative;
            margin: 0 auto;
        }

        .container video {
            width: 800px;
            height: 432px;
          
           
        }

        .controls {
            width: 760px;
            padding: 0 20px;
            position: absolute;
            height: 90px;
            bottom: 0px;
            left: 0px;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .play {
            font-size: 50px;
            color: #fff;
        }

        .btn {
            height: 50px;
            display: flex;
            align-items: center;
        }

        .time {
            margin-left: 10px;
            font-size: 20px;
            color: #fff;
        }

        .progress {
            width: 740px;
            height: 5px;
            border-radius: 5px;
            margin-top: 10px;
            background-color: #aaa;
            position: relative;
        }

        .current-progress {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #fff;
            height: 5px;
            border-radius: 5px;
        }
        .full{
            position: absolute;
            right: 20px;
            top: 10px;
            font-size: 20px;
            color: white;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <video src="./video/r1.mp4" controls></video>
    </div>

    <div class="container">
        <video src="./video/r1.mp4" class="video" ></video>
        <div class="controls">
            <div class="btn">
                <div class="play  iconfont icon-play"></div>
                <div class="time">
                    <span class="currenttime">0:00</span> /
                    <span class="totaltime"></span>
                </div>
                <div class="full">全屏</div>
            </div>
            <div class="progress">
                <div class="current-progress line"></div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <!--    
        音视频标签对象的属性和方法： 都是DOM对象的属性和方法
       1,  方法：play()  pause() 
           play()	开始播放视频。
           pause()	暂停当前播放的视频。

       2. 属性： currentTime   duration
           currentTime	设置或返回视频中的当前播放位置（以秒计）。
           duration	返回视频的长度（以秒计）。
       
       3. 事件： 
           canplay事件 :浏览器能够开始播放指定的音频/视频时，发生 canplay 事件。
           timeupdate事件：timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发。

               该事件可以在以下情况被调用:
               播放音频/视频（audio/video）
               移动音频/视频（audio/video）播放位置

       4. 音量的控制
          volume	设置或返回视频的音量。  取值： 0 - 1

-->
    <script>
        let flag = false;
        $('.play').click(function () {
            flag = !flag;
            $(this).toggleClass('icon-pause').toggleClass('icon-play');
            if (flag) {
                $('.video').get(0).play();
            } else {
                $('.video').get(0).pause();
            }
        })
        // 监听事件视频可以播放的时候，自定义视频的长度
        $('.video').get(0).oncanplay=function(){
                let time=$(this).get(0).duration;
                $('.totaltime').text(formate(time));     
        }
        // 视频开始播放的时候，监听当前视频的长度,同时设置进度条跟随播放
        $('.video').get(0).ontimeupdate = function () {
            let currentTime = $('.video').get(0).currentTime;
            $('.currenttime').text(formate(currentTime));
            let width=currentTime*$('.progress').width()/$('.video').get(0).duration;
            $('.current-progress').css({width:width})
        }
        // 点击滚动条事件，视频播放长度发生变化，进度条变化
        $('.progress').click(function(e){
            let width=e.pageX-$(this).offset().left;
            $('.current-progress').css({width:width});
            let currentTime=width/($('.progress').width()/$('.video').get(0).duration)
            $('.video').get(0).currentTime=currentTime
        })
        $('.progress').mousedown(function(){
            $(document).mousemove(function(e){
                let width=e.pageX-$('.progress').offset().left;
                width=width>$('.progress').width()? $('.progress').width():width;
                width=width<0? 0:width;
                $('.current-progress').css({width:width});
                let currentTime=width/($('.progress').width()/$('.video').get(0).duration)
                $('.video').get(0).currentTime=currentTime
            })
        })
        $(document).mouseup(function(){
               // $().on('click.myclick') 给事件添加命名空间 .myclick
            //  移除事件  $().off()  没有参数：移除所有的事件，接受参数，参数是事件名或者命名空间（相当于给事件起别名）， 移除指定的事件
            $(this).off('mousemove');
        })
        $('.full').click(function(){
            $('.video').get(0).requestFullscreen()
        })
        function formate(time){
            let m=parseInt(time/60);
            let s=parseInt(time%60);
            s=s<10? '0'+s:s;
            return `${m}:${s}`
        }
    </script>
</body>

</html>

云杰8了

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
自定义音视频控件

自定义音视频控件效果图如下实现原理音视频标签对象的属性和方法：1, 方法：`play()` `pause()`2. 属性： `currentTime` `duration`3. 事件：4. 音量的控制问题分析代码如下效果图如下实现原理在此你需要知道以下原理音视频标签对象的属性和方法：都是DOM对象的属性和方法1, 方法：play() pause()play()开始播放视频。pause() 暂停当前播放的视频。2. 属性： currentTime durationcurrentT
复制链接

扫一扫