网络知识

html5视频标签实现指定时间点的播放与暂停

Posted Cola🌀 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <title>video</title> 
    <meta http-equiv="pragma" content="no-cache"> 
    <meta http-equiv="cache-control" content="no-cache"> 
    <meta charset="utf-8"> 
  </head> 
 
<body> 
    <div class="container"> 
        <input type="button" value='50-80' onclick="playMedia(50,80)">第50秒开始-80秒时暂停 
        <br > 
        <br > 
        <button onclick="playMedia(30,null)" type="button">从第30秒开始播放到结束</button> 
        <input type="text" id="showTime"/> 
        <br > 
        <br > 
        <video id="video1"  controls=true src='https://stafo.s3.au-syd.cloud-object-storage.appdomain.cloud/JR.mp4'> 
        </video> 
    </div> 
 
</body> 
 
<script> 
 
    var myVid=document.getElementById("video1"); 
    myVid.addEventListener("timeupdate",timeupdate); 
 
    var _endTime; 
 
    //视频播放 
    function playMedia(startTime,endTime){ 
        //设置结束时间 
        _endTime = endTime; 
        myVid.currentTime=startTime; 
          myVid.play(); 
    } 
     
    function timeupdate(){ 
        //因为当前的格式是带毫秒的float类型的如：12.231233，所以把他转成String了便于后面分割取秒 
        var time = myVid.currentTime+""; 
        document.getElementById("showTime").value=time; 
        var ts = time.substring(0,time.indexOf(".")); 
        if(ts==_endTime){ 
            myVid.pause(); 
        } 
         
    } 
 
</script> 
</html>