HTML5多媒体

最新推荐文章于 2022-03-17 23:58:07 发布

码农阳神

最新推荐文章于 2022-03-17 23:58:07 发布

阅读量381

点赞数 1

分类专栏：前端知识

本文链接：https://blog.csdn.net/qq_44797965/article/details/104330068

版权

前端知识专栏收录该内容

74 篇文章 0 订阅

订阅专栏

方法：load()、play()、pause()
属性：currentSrc、currentTime、duration
事件：oncanplay， ontimeupdate，onended 等

<!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>
    // 这些方法、属性和事件允许您使用 JavaScript 来操作 <audio> 和 <video> 元素
    // 这些api 是原生js dom的操作 我们如果使用jquery 千万别忘了转换
    // 获取元素
      var video = $("video").get(0);  // 把jquery 对象转换为 dom对象
      // 计算时分秒函数
       function formatTime(time) {
           // 计算小时
           // 我们有总的秒 数  计算 小时
           // 1小时 60 * 60  ==  3600 
           // 4000 / 3600  = 1
           var h = Math.floor(time / 3600);
            // 计算 分数
           // 我们有总的秒 数  计算 分数
           // 
           // 4000 % 3600   = 400 / 60 
           var m = Math.floor( time % 3600 / 60);
           var s = Math.floor(time % 60);
           // 00:00:00
           return (h<10 ? "0" + h : h) + ":" + (m<10 ? "0" + m : m) + ":" + (s<10 ? "0" + s : s); 
       }
    // 1. 当我们浏览器可以播放视频的时候，就让video 显示出来  让我们的时间显示出来
       video.oncanplay = function() { // oncanplay 是 video 原生事件 所以用 video dom对象
            // oncanplay浏览器可以播放视频
            $("video").show();  // show 是jquery 方法 所以要用 jquery对象调用
            // 我们怎么得到视频的长度呢时间
            // duration 是视频属性 H5  返回视频的长度 要用原生的dom对象调用
             //console.log(video.duration);  164.815238 有小数             
             var totalTime = formatTime(video.duration);
             console.log(totalTime);
             // 让我们总的时长的盒字放入 总时长
             $(".total").html(totalTime);
       }
    // 2. 播放和暂停按钮
    // 当我们点击按钮，如果有 fa-play  这个 我们就切换为 fa-pause   并且播放
       $(".switch").on("click", function() {
        // 
            if($(this).hasClass("fa-play")) {  // 播放
              video.play();  // play 视频的方法  需要用dom  播放视频
              $(this).addClass('fa-pause').removeClass("fa-play");  // 切换图标
          }  else {  // 暂停
                video.pause();  // pause 视频的方法  需要用dom  播放视频
              $(this).addClass("fa-play").removeClass('fa-pause');  // 切换图标
          }
       })
    // 3. 进度条显示   当目前的播放位置已更改时
    //  除了自己进行之外， 只要我们修改了 video.currentTime  就会执行 ontimeupdate
       video.ontimeupdate = function() {
           // console.log(11);
           // 我们需要知道当前的时间
           // console.log(video.currentTime); 得到是秒数
           // line 这个变色的盒子 宽度 =  当前的时间 / 总的时间  * 100 + % 
           var w = video.currentTime / video.duration * 100 + "%";
           console.log(w)
           $(".line").css("width", w);
           // 4.显示我们的当前时间 
          $(".current").html(formatTime(video.currentTime));
       }
     // 5. 全屏显示  fa-compress   fa-arrows-alt
        $(".expand").on("click", function() {
        // 
            if($(this).hasClass("fa-arrows-alt")) {  // 播放            
              video.webkitRequestFullScreen();  // 全屏显示   
              $(this).addClass('fa-compress').removeClass("fa-arrows-alt");  // 切换图标
          }  else {              
             document.webkitCancelFullScreen();  // 取消 全屏显示  跟元素无关 跟document有关系 
              $(this).addClass("fa-arrows-alt").removeClass('fa-compress');  // 切换图标
          }
       })
        // 6. 视频完成之后，重置操作
        // 视频播放完毕 用 onended 事件
        video.onended = function () {
             // 当前的视频时间清零 
             video.currentTime = 0;
             // 同时还要把 播放按钮改为 play
             $(".switch").addClass("fa-play").removeClass('fa-pause');
        }        
        // 7.  点击 bar 跃进效果 
        // 
        $(".bar").on("click", function(event) {
            // 点击的位置 /  bar 的长度 * 总的时长  =  当前视频的播放位置
            // 1. 点击 位置
            var offset = event.offsetX;
            // console.log(offset);
            // 2. 当前点击视频的播放位置  当前的时间
            var current = offset / $(this).width() * video.duration;
            console.log(current);  
            // 3. 把当前的时间 给 currentTime 
            video.currentTime = current; 
        })            
</script>
</body>
</html>