一个自定义的html5视频播放器

news2025/1/21 7:20:31

// 功能:

// 1.视频的播放与暂停(图标变化)

// 2.总时间的显示

// 3.当前时间的显示(进度)

// 4.进度条的显示

// 5.跳跃播放

// 6.全屏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>自定义视频播放器</title>
  <!-- 所有的库一定都在当前页面的css的前面 -->
  <link rel="stylesheet" href="./css/font-awesome.min.css">
  <!-- <link rel="stylesheet" href="./css/font-awesome.css"> -->
  <link rel="stylesheet" href="./css/main.css">
</head>
<body>
  <div class="player">
    <!-- 视频 -->
    <video src="./movie/movie02.mp4" width="100%" height="100%">
      <!-- <source src="./movie//movie02.mp4"> -->
    </video>
    <!-- 控制菜单 -->
    <div class="controls">
      <!-- 播放按钮 -->
      <a href="javascript:;" class="play-btn fa fa-play-circle-o"></a>
      <!-- 进度条 -->
      <div class="progress">
        <div class="progress-bar" style="width: 0%"></div>
      </div>
      <!-- 播放时间 -->
      <div class="time">
        <span class="current">00:00:00</span>/
        <span class="total">00:00:00</span>
      </div>
      <!-- 全屏按钮 -->
      <a href="javascript:;" class="fullscreen fa fa-expand"></a>
    </div>
  </div>
  <script>
    // 功能:
    // 1.视频的播放与暂停(图标变化)
    // 2.总时间的显示
    // 3.当前时间的显示(进度)
    // 4.进度条的显示
    // 5.跳跃播放
    // 6.全屏
    // 下面开始实现功能：



    // 1.视频的播放与暂停(图标变化)
    // 获取视频以及按钮
    var video=document.querySelector("video");
    var btn=document.querySelector(".play-btn");
    btn.addEventListener("click",function(){
      // 判断视频状态并改变按钮
      if(video.paused){
        video.play();
        // this.classList.toggle("fa-pause-circle-o");
        this.classList.remove("fa-play-circle-o");
        this.classList.add("fa-pause-circle-o");

      }else{
        video.pause();
        this.classList.remove("fa-pause-circle-o");
        this.classList.add("fa-play-circle-o");
      }
    });
    // 2.总时间的显示
    // 获取总时间的按钮
    var total=document.querySelector(".total");
    video.oncanplay=function(){
      var h=Math.floor(video.duration/3600);
      var m=Math.floor(video.duration/60-(h*60));
      var s=Math.floor(video.duration%60);
      h=h<10?'0'+h:h;
      m=m<10?'0'+m:m;
      s=s<10?'0'+s:s;
      total.innerHTML=h+':'+m+':'+s;
    }
    // 获取当前时间
    var current=document.querySelector(".current");
    // 获取进度条
    var progressBar = document.querySelector(".progress-bar");
    video.ontimeupdate=function(){
      var h=Math.floor(video.currentTime/3600);
      var m=Math.floor(video.currentTime/60-(h*60));
      var s=Math.floor(video.currentTime%60);
      h=h<10?'0'+h:h;
      m=m<10?'0'+m:m;
      s=s<10?'0'+s:s;
      current.innerHTML=h+':'+m+':'+s;
        // 计算公式 进度条的长度 = 当前时间 / 总时间 * 100 + '%'
        progressBar.style.width = video.currentTime / video.duration * 100 + '%';
    }
    //跳跃播放
    // 获取进度条
    var progress=document.querySelector(".progress");
    progress.addEventListener("click",function(event){
        var clickX=event.offsetX;
        var width=this.offsetWidth
       video.currentTime = clickX / width * video.duration;
    });
    // 全屏
    // 获取按钮
    var fullscreen = document.querySelector(".fullscreen");
    fullscreen.onclick = function () {
    // 请求全屏
      video.webkitRequestFullScreen();
      
    }

  </script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/151879.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！