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>
如有帮助,请点击我的回答下方的【采纳该答案】按钮帮忙采纳下,谢谢!
你这个问题主要就是两个接口,一个是视频跳转到对应位置的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);
望采纳
这个很容易!有开发工具帮助那里有!点进去