html5跳转视频代码,HTML5 Video(视频)(示例代码)
时间: 2023-11-14 17:05:45 浏览: 42
以下是一个简单的HTML5视频跳转代码示例:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Video跳转示例</title>
</head>
<body>
<video id="myVideo" width="640" height="360" controls>
<source src="myVideo.mp4" type="video/mp4">
<source src="myVideo.webm" type="video/webm">
<source src="myVideo.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<button onclick="jump(5)">跳转到5秒</button>
<button onclick="jump(30)">跳转到30秒</button>
<script>
var video = document.getElementById("myVideo");
function jump(time) {
video.currentTime = time;
}
</script>
</body>
</html>
```
在这个示例中,我们创建了一个带有播放器控件的视频元素,并使用`<source>`标签指定了三个视频文件的来源。如果浏览器不支持HTML5视频,则会显示“Your browser does not support the video tag.”。
接下来,我们创建了两个按钮,分别用于跳转到5秒和30秒。这些按钮都使用`onclick`属性调用了名为`jump`的JavaScript函数。
在JavaScript函数中,我们使用`document.getElementById()`方法获取视频元素,并将其赋值给变量`video`。然后,我们设置`video.currentTime`属性来跳转到指定的时间。
请注意,`currentTime`属性的值以秒为单位。因此,在我们的`jump`函数中,我们只需将所需的时间作为参数传递,并将其分配给`video.currentTime`即可。