js编写简易播放器

最新推荐文章于 2023-06-19 23:51:40 发布

技术萌新阿肖

最新推荐文章于 2023-06-19 23:51:40 发布

阅读量385

点赞数 1

本文链接：https://blog.csdn.net/qq_46537431/article/details/107615652

版权

效果图（不兼容谷歌）：
功能：能够实现显示视频总时长，可以随着视频的播放，进度条和播放时间同步增加，也可以拖动进度条使得播放时间和播放内容同步变化
在这里插入图片描述
源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video</title>
</head>
 <body>
     <video src="img/sing.mp4" id="player" width="400px" height="200px"  autoplay="autoplay" >
  </video>
  <p style="text-align: center;">
   <div></div>
        播放进度：<input type="range" id="ranges" value="0" min="0"  step="1"    />
      <input type="button" id="timea" value="00:00">
         <input  type="button"  id="timeb" value="00:00">
         <button onclick="play()">播放/暂停</button> </p>
         
         </body>
</html>

js部分：


   var player = document.getElementById("player");
   var ranges = document.getElementById("ranges");
   var timea = document.getElementById("timea");
   var timeb = document.getElementById("timeb");
          function play(){
           var player = document.getElementById("player");
                if (player.paused)
                player.play();
                else
                player.pause();
          }
   player.addEventListener('canplay',function(){
    timeb.value = changeTime(player.duration);
    ranges.max=player.duration;
   })
player.addEventListener('timeupdate',function(){
    timea.value=changeTime(player.currentTime);
    ranges.value= player.currentTime;
   })
   ranges.addEventListener('change',function(){
     player.currentTime=ranges.value;
   }) 
   function changeTime(time){
    var newTime = parseInt(time);
    var min = toZero(Math.floor(newTime%3600/60));
    var sec = toZero(Math.floor(newTime%60));
    return min+":"+sec;
    function toZero(num){
     if(num<10){
      return '0'+num;
     } else{
      return num;
     }
    }
   }
   changeTime();

技术萌新阿肖

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js编写简易播放器

效果图（不兼容谷歌）：功能：能够实现显示视频总时长，可以随着视频的播放，进度条和播放时间同步增加，也可以拖动进度条使得播放时间和播放内容同步变化源代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>video</title></head> <body> <video src="
复制链接

扫一扫