1、创建一个带有控件、加载网页时自动播放并循 环播放音频的页面。 2、编写一个多功能的视频播放页面。 综合使用 播放视频时所用的方法和多媒体的属性,在播放 视频文件时,能够单击播放、暂停、停止、加速 播放、减速播放和正常速度。
时间: 2023-05-18 12:04:51 浏览: 63
1、创建一个带有控件、加载网页时自动播放并循环播放音频的页面:
您可以使用 HTML5 的 audio 标签来实现自动播放和循环播放音频,同时使用 JavaScript 来控制音频的播放和暂停。以下是示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>自动播放音频页面</title>
</head>
<body>
<audio id="myAudio" autoplay loop>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<button onclick="playPause()">播放/暂停</button>
<button onclick="stop()">停止</button>
<script>
var myAudio = document.getElementById("myAudio");
function playPause() {
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
}
function stop() {
myAudio.pause();
myAudio.currentTime = 0;
}
</script>
</body>
</html>
```
2、编写一个多功能的视频播放页面:
您可以使用 HTML5 的 video 标签来实现视频播放,同时使用 JavaScript 来控制视频的播放、暂停、停止、加速播放、减速播放和正常速度。以下是示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>多功能视频播放页面</title>
</head>
<body>
<video id="myVideo" width="640" height="360">
<source src="video.mp4" type="video/mp4">
</video>
<button onclick="playPause()">播放/暂停</button>
<button onclick="stop()">停止</button>
<button onclick="speedUp()">加速</button>
<button onclick="speedDown()">减速</button>
<button onclick="normalSpeed()">正常速度</button>
<script>
var myVideo = document.getElementById("myVideo");
function playPause() {
if (myVideo.paused) {
myVideo.play();
} else {
myVideo.pause();
}
}
function stop() {
myVideo.pause();
myVideo.currentTime = 0;
}
function speedUp() {
myVideo.playbackRate += 0.5;
}
function speedDown() {
myVideo.playbackRate -= 0.5;
}
function normalSpeed() {
myVideo.playbackRate = 1;
}
</script>
</body>
</html>
```