HTML如何跳转视频播放位置,并且播放指定时长后暂停?

HTML如何跳转视频播放位置,并且播放指定时长后暂停?
比如20s的视频,一键跳转到00:06,并指定播放至00:08,然后自动暂停

尝试下这个吧,可以用


```html
<!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='10-13' onclick="playMedia(10,13)">第10秒开始-13秒时暂停 
        <br > 
        <br > 
        <button onclick="playMedia(50,null)" type="button">从第50秒开始播放到结束</button> 
        <input type="text" id="showTime"/> 
        <br > 
        <br > 
        <video id="video1" autoplay="autoplay" controls=true src='http://www.amdcu.net/admin/data/admin/lm_data/lm_23781/story_content/video_5uVjEQZCagr_30_48_720x406.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>  

```

你题目的解答代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> 

<button onclick="setCurTime(6)" type="button">一键跳转到 6 秒</button>
<br />
<br />
<video id="video1" controls="controls">
  <source src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script>
var video = document.getElementById("video1");
function setCurTime(t)
{ 
   video.currentTime=t;
   video.play();
} 
video.addEventListener("timeupdate", function (e) {
    if (video.currentTime>=8) //指定播放至00:08后自动暂停
        video.pause();
}, false);
</script> 

</body> 
</html>

如有帮助,请点击我的回答下方的【采纳该答案】按钮帮忙采纳下,谢谢!

img

你这个问题主要就是两个接口,一个是视频跳转到对应位置的api
使用video.currentTime=你想要跳转的时间;

第二个是监听视频播放到目标位置暂停
视频播放的监听事件是timeupdate事件
添加事件监听的方式如下:
video.addEventListener("timeupdate", function (e) {
if (video.currentTime>=8) //播放到对应时间暂停
video.pause();//视频暂停的api
}, false);

使用video的属性设置开始时间 然后播放:

video.currentTime= 6      // 要跳转的时间,单位秒

使用video 监听事件timeupdate


video.addEventListener("timeupdate", function (e) {
if (video.currentTime>=8){// 播放到8秒 
       video.pause();//暂停
}, false);

望采纳

这个很容易!有开发工具帮助那里有!点进去