h5-api video案例

最新推荐文章于 2024-04-03 22:26:15 发布

原创最新推荐文章于 2024-04-03 22:26:15 发布 · 1.1w 阅读

CC 4.0 BY-SA版权

本文介绍如何使用HTML5和JavaScript创建一个自定义视频播放器，包括播放/暂停、播放进度显示、全屏切换等功能，并详细解释了时间转换、播放状态控制及全屏模式的实现。

<!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/chrome.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(){
        //    多媒体提供的方法都是dom提供的,获取的jq对象要转dom对象
        var $video = $("video");
        //获取的jq对象要转dom对象
        var video = $video.get(0);
        var $switch = $(".switch");
        var $line = $(".line");
        var $bar = $(".bar");
        var $current = $(".current");
        var $total = $(".total");
        var $expand = $(".expand");
        //时间转换函数
        var formatTime=function(time){
            //time=3666s
            var h = Math.floor(time/3600);
            var m = Math.floor(time%3500/60);
            var s = Math.floor(time%3600%60);
            h=h>=10?h:"0"+h;
            m=m>=10?m:"0"+m;
            s=s>=10?s:"0"+s;
            return h+":"+m+":"+s;
        };
        //1、加载效果，总时长显示
        //当视屏加载完毕可播放时执行
        //........方法名小写啊啊啊啊啊
        video.oncanplay=function(){
            $video.show();//用jq方法把它显示出来更方便
            var totalTime=video.duration;
            $total.html(formatTime(totalTime));
        };

        //2、播放功能   暂停功能
        $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");
            }
        });
        // 3、播放进度显示
        // 进度条时间改变事件
        video.ontimeupdate=function(){
            $current.html(formatTime(video.currentTime));
            var p = video.currentTime/video.duration;//是个小数
            var wid = p * 100 + "%";
            $line.css("width",wid);
        };
        $expand.on("click",function(){
            if($expand.hasClass("fa-arrows-alt")){
                video.webkitRequestFullScreen();
                $expand.removeClass("fa-arrows-alt").addClass("fa-compress");
            }else{
                document.webkitCancelFullScreen();
                $expand.removeClass("fa-compress").addClass("fa-arrows-alt");
            }
        });
        $bar.on("click",function(e){
            //先获取点击位置距离bar左边的长度
            var place= e.offsetX;
            console.log(place);
            var width=$bar.width();
            console.log(width);
            var time=place/width*video.duration;
            console.log(time);
//            video.currentTime=time;
            video.currentTime = time;
            console.log(video.currentTime);
//            video.ontimeupdate();
        });
        video.onended=function(){
            video.currentTime=0;
            $switch.removeClass("fa-play").addClass("fa-pause");
        };
    });
</script>
</body>
</html>