)网页中添加音/视频标签; (2)可以控制视频的暂停和播放; (3)点击播放之后按钮变为暂停,点击暂停按钮变成播放; (4)在播放的时候能够显示当前播放时间和总时间; (5)拖动进度条可以快进和快退。
时间: 2024-01-14 22:05:14 浏览: 135
好的,您的问题是如何在网页中添加音/视频标签,我可以给您简单介绍一下:
1. 首先,您需要在HTML中使用`<video>`或`<audio>`标签来添加音频或视频。例如:
```
<video src="video.mp4"></video>
```
2. 您也可以添加一些属性来控制播放和显示相关信息,例如:
```
<video src="video.mp4" controls></video>
```
`controls`属性可以让浏览器自动添加控制面板,包括播放/暂停、音量、进度条等。
3. 您可以通过JavaScript来控制视频的播放和暂停,例如:
```
var video = document.querySelector('video');
var playButton = document.querySelector('#play-button');
playButton.addEventListener('click', function() {
if (video.paused) {
video.play();
playButton.textContent = '暂停';
} else {
video.pause();
playButton.textContent = '播放';
}
});
```
以上代码中,我们使用`document.querySelector`方法获取到页面中的`video`元素和播放按钮,然后添加点击事件来切换播放状态和按钮文本。
4. 您可以使用`currentTime`属性和`duration`属性来获取当前播放时间和总时间,例如:
```
var video = document.querySelector('video');
var currentTime = document.querySelector('#current-time');
var totalTime = document.querySelector('#total-time');
video.addEventListener('timeupdate', function() {
currentTime.textContent = formatTime(video.currentTime);
totalTime.textContent = formatTime(video.duration);
});
function formatTime(time) {
var minutes = Math.floor(time / 60);
var seconds = Math.floor(time % 60);
return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
}
```
以上代码中,我们使用`addEventListener`方法来监听`timeupdate`事件,该事件会在视频播放时持续触发,我们在事件处理函数中更新当前时间和总时间的文本内容,并且使用`formatTime`函数来格式化时间。
5. 最后,您可以使用`input`元素来创建进度条,并且使用`currentTime`属性来控制快进和快退,例如:
```
var video = document.querySelector('video');
var progressBar = document.querySelector('#progress-bar');
progressBar.addEventListener('input', function() {
video.currentTime = video.duration * (progressBar.value / 100);
});
```
以上代码中,我们使用`addEventListener`方法来监听`input`事件,该事件会在进度条值改变时触发,我们在事件处理函数中根据进度条值计算出当前时间,并且将其设置为视频的`currentTime`属性,从而实现快进和快退的效果。
希望以上内容对您有所帮助!
阅读全文