视频播放以及控制器，用户填写弹幕，不规则加载在视频上-CSDN博客

本文链接：https://blog.csdn.net/kane_qqq/article/details/121467539
切记，请先下载moment.js!!!
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>player_video.html</title>
  <style>
    .container {
      width: 400px;
      border: 1px solid #ddd;
      text-align: center;
      padding-bottom: 10px;
      position: relative;
    }
    .container p{
      font-size: 1.3em;
      font-weight: bold;
      text-align: center;
    }
    .container img{
      width: 340px;
      height: 340px;
      border-radius: 50%;
    }
    .container input{
      width: 340px;
      display: block;
      margin: 10px auto;
    }
    .container .time{
      width: 340px;
      height: 30px;
      margin: 0px auto;
    }
    .container .time .left{
      float: left;
    }
    .container .time .right{
      float: right;
    }
  </style>
</head>
<body>
  <div class="container">
    <video id="video"  src="http://wupen-video.oss-cn-shanghai.aliyuncs.com/course-video%2F7aeca5f0-c86a-11eb-8788-051db22421b8.mp4"
      style="width:640px;height:360px;background:black;">
      <!-- <track  srclang="zh"  kind="subtitles"  srclang="de" src="http://58.33.91.82:12404/wupen-test/files/a4caeba0-c92f-11eb-9100-8fb136aa3a37_ko.vtt" default> -->
        <track  kind="subtitles" src="http://58.33.91.82:12404/wupen-test/files/a4caeba0-c92f-11eb-9100-8fb136aa3a37_ko.vtt" srclang="zh" label="Chinese">  
    
    </video>
    <!-- 准备好一个canvas -->
    <canvas id="cvs" width="640" height="360"
      style="position:absolute; top: 0; left: 0;"></canvas>

    <input id="range" type="range" min="0" value="0" max="100">
    <div class="time">
      <span class="left">00:00</span>
      <span class="right"></span>
    </div>
    
    <button id="btn_play">播放/暂停</button>
    <button id="btn_vp">音量+</button>
    <button id="btn_vm">音量-</button>
    <button id="btn_05">0.5倍速</button>
    <button id="btn_1">1倍速</button>
    <button id="btn_2">2倍速</button>
    <br><br>
    <button id="btn_fc">进入全屏显示</button>
    <input placeholder="请输入弹幕内容..." id="dminput" type="text">
    <button id="btn_send">发送弹幕</button>
  </div>

  <script src="moment.js"></script>
  <script>
    // 绘制弹幕
    let ctx = cvs.getContext('2d');
    // 发送弹幕
    let dmlist = [];
    btn_send.addEventListener('click', ()=>{
      dmlist.push({
        content: dminput.value,  // 文本框的值
        x: 600,
        y: (Math.floor((Math.random() * 12))+1)*30
      })
      console.log(dmlist);
    });

    // 使用window.requestAnimationFrame() 实现动画
    function draw(){
      // 将画布中的所有像素点清空
      ctx.clearRect(0, 0, 640, 360);
      dmlist.forEach(item=>{ //item是遍历过程中的每个元素
        ctx.font="20px 微软雅黑";
        ctx.fillStyle = 'white';
        ctx.fillText(item.content, item.x--, item.y);
      })
      window.requestAnimationFrame(draw);
    }
    window.requestAnimationFrame(draw);

    
    // 在全局启动一个定时器（仅此一个），每1000/60毫秒重绘canvas
    // window.setInterval(()=>{
    //   // 将画布中的所有像素点清空
    //   ctx.clearRect(0, 0, 640, 360);
    //   dmlist.forEach(item=>{ //item是遍历过程中的每个元素
    //     ctx.font="20px 微软雅黑";
    //     ctx.fillStyle = 'white';
    //     ctx.fillText(item.content, item.x--, item.y);
    //   })
    // }, 1000/60);

    // 使用js创建一个音乐播放器  Audio有构造器，可以直接new
    // 创建的播放器保存在内存中，不必绑定到DOM树中也可播放音乐。
    let player = document.getElementById('video');

    // 点击全屏按钮
    btn_fc.addEventListener('click', function(){
      player.requestFullscreen();  // 请求全屏显示
      // btn_fc.requestFullscreen();
    })

    // 为进度条绑定事件，跳转到相应位置进行播放
    range.addEventListener('change', function(){
      player.currentTime = range.value;
    });

    // 页面加载完毕后更新总时长
    player.addEventListener('loadedmetadata', function(){
      // 计算总时长
      let pd = player.duration;     // 总时长
      let pdstr = moment.unix(pd).format('mm:ss');
      let right=document.getElementsByClassName('right')[0];
      right.innerHTML = pdstr;
    })    

    // 为player绑定timeupdate事件，播放进度更新时触发
    // 在播放过程中，timeupdate每秒执行4次
    player.addEventListener('timeupdate', function(){
      let pc = player.currentTime;  // 当前时间点
      let pd = player.duration;     // 总时长
      // 基于momentjs  获取两个时间字符串
      let pcstr = moment.unix(pc).format('mm:ss');
      let pdstr = moment.unix(pd).format('mm:ss');

      // 更新文本
      let left=document.getElementsByClassName('left')[0];
      let right=document.getElementsByClassName('right')[0];
      left.innerHTML = pcstr;
      right.innerHTML = pdstr;

      // 更新进度条
      let range = document.getElementById('range');
      range.max = pd;
      range.value = pc;
    })

    // 倍速播放
    btn_05.addEventListener('click', function(){
      player.playbackRate = 0.5;
    });
    btn_1.addEventListener('click', function(){
      player.playbackRate = 1;
    });
    btn_2.addEventListener('click', function(){
      player.playbackRate = 2;
    });

    // 音量增与音量减
    // btn_vp 不需要getElementById，可以直接使用
    btn_vp.addEventListener('click', function(){  
      let v = player.volume;
      console.log(v);
      player.volume = Math.min(1, v+0.1);
    });
    btn_vm.addEventListener('click', function(){  
      let v = player.volume;
      console.log(v);
      player.volume = Math.max(0, v-0.1);
    });
    

    // 播放与暂停
    let btn_play = document.getElementById('btn_play');
    btn_play.addEventListener('click', function(){
      if(player.paused){
        player.play();  // 播放音乐
      }else{
        player.pause();
      }
    });

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