自定义视频播放器

最新推荐文章于 2023-01-10 09:07:14 发布

广东话的蛇皇

最新推荐文章于 2023-01-10 09:07:14 发布

阅读量183

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/104526919

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

自定义视频播放器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>视频播放</title>
    <!--字体图标库-->
    <link rel="stylesheet" href="css/font-awesome.css"/>
    <link rel="stylesheet" href="css/player.css"/>
</head>
<body>
<figure>
    <figcaption>视频播放器</figcaption>
    <div class="player">
        <video src="./video/fun.mp4"></video>
        <div class="controls">
            <!--播放/暂停-->
            <a href="javascript:;" class="switch fa fa-play"></a>
            <!--播放进度-->
            <div class="progress">
                <div class="line"></div>
                <div class="bar"></div>
            </div>
            <!--当前播放时间/播放总时长-->
            <div class="timer">
                <span class="current">00:00:00</span> / <span class="total">00:00:00</span>
            </div>
            <!--全屏/取消全屏-->
            <a href="javascript:;" class="expand fa fa-arrows-alt"></a>
        </div>
    </div>
</figure>
<script src="./js/jquery.min.js"></script>
<script>
    $(function () {
        /*获取需要操作的元素*/
        var $video = $('video');
        /*因为api是属于原生的dom元素的*/
        var video = $video.get(0);

        /*播放和暂停*/
        var $switch = $('.switch');
        /*总时长*/
        var $total = $('.total');
        /*进度条*/
        var $line = $('.line');
        /*当前播放时间*/
        var $current = $('.current');
        /*全屏按钮*/
        var $expand = $('.expand');
        /*灰色进度条*/
        var $bar = $('.bar');

        var formatTime = function (time) {
            /*00:00:00*/
            var h = Math.floor(time/3600);
            var m = Math.floor(time%3600/60);
            var s = Math.floor(time%60);
            return (h<10?'0'+h:h)+':'+(m<10?'0'+m:m)+':'+(s<10?'0'+s:s)
        }

        /*1. 需要在加载是时候  显示加载状态*/
        /*当前视频加载到可以播放了就可以隐藏这个状态*/
        video.oncanplay = function () {
            $video.show();
            /*显示总时间*/
            var timeStr = formatTime(video.duration);//duration 返回视频或音频的时长（以秒为单位）
            /*6. 总时间显示*/
            $total.html(timeStr);
        }

        /*2. 播放*//*3. 暂停*/
        $switch.on('click',function () {
            if($switch.hasClass('fa-play')){
                video.play();
                $switch.removeClass('fa-play').addClass('fa-pause');
            }else{
                video.pause();
                $switch.removeClass('fa-pause').addClass('fa-play');
            }
        });

        /*4. 进度条显示*/
        video.ontimeupdate = function () {
            //console.log('当前播放时间：'+video.currentTime);
            /*计算  进度条的宽度根据  当前播放时间/总时间  */
            var p = video.currentTime/video.duration*100+'%';
            $line.css('width',p);
            /*5. 播放时间显示*/
            $current.html(formatTime(video.currentTime));
        }
        /*7. 全屏操作*/
        $expand.on('click',function () {
            if($(this).hasClass('fa-arrows-alt')){
                video.webkitRequestFullScreen();
                $(this).removeClass('fa-arrows-alt').addClass('fa-compress');
            }else{
                document.webkitCancelFullScreen();
                $(this).addClass('fa-arrows-alt').removeClass('fa-compress');
            }

        })
        /*8. 视频播放完成重置播放*/
        video.onended = function () {
            video.currentTime = 0;
            $switch.removeClass('fa-pause').addClass('fa-play');
        }
        /*9. 跃进功能*/
        $bar.on('click',function (e) {
            /*获取点击的位置距离进度条左侧的距离*/
            var p = e.offsetX/$bar.width();
            var goTime = p * video.duration;
            video.currentTime = goTime;
        })
    });
</script>
</body>
</html>

广东话的蛇皇

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义视频播放器

自定义视频播放器<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>视频播放</title>  <link rel="stylesheet" href="css/f...
复制链接

扫一扫

专栏目录