HTML支持播放视频、音频吗？

html

HTML支持播放视频和音频。HTML5引入了两个新的元素：<video>和<audio>，它们允许开发者在网页上嵌入音频和视频内容。这些元素都支持多种格式，包括MP4、WebM和Ogg等。

以下是一个使用HTML和JavaScript创建简单视频播放器的示例。这个示例中的播放器具有播放、暂停和停止功能。

示例效果与源代码：

运行效果

HTML支持播放视频和音频。HTML5引入了两个新的元素：<video>和<audio>，它们允许开发者在网页上嵌入音频和视频内容。这些元素都支持多种格式，包括MP4、WebM和Ogg等。

以下是一个使用HTML和JavaScript创建简单视频播放器的示例。这个示例中的播放器具有播放、暂停和停止功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<body>

<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持Video标签。
</video>

<br>

<button onclick="playPause()">播放/暂停</button> 
<button onclick="stopVideo()">停止</button>

<script>
var myVideo = document.getElementById("myVideo"); 

function playPause() { 
    if (myVideo.paused) 
        myVideo.play(); 
    else 
        myVideo.pause(); 
} 

function stopVideo() { 
    myVideo.pause(); 
    myVideo.currentTime = 0; 
} 
</script>

</body>
</html>

在这个示例中，我们首先定义了一个<video>元素，其中id属性为"myVideo"，width和height属性定义了视频播放器的大小，controls属性则添加了播放、暂停和音量控制等功能。<source>元素用于指定视频文件的路径和类型。如果浏览器不支持<video>标签，将显示"您的浏览器不支持Video标签。"这段文本。

然后，我们定义了两个按钮，分别用于播放/暂停视频和停止视频。这两个按钮通过onclick属性与JavaScript函数playPause()和stopVideo()关联。

在JavaScript部分，我们首先通过document.getElementById()获取了<video>元素，并将其存储在变量myVideo中。然后，我们定义了playPause()和stopVideo()两个函数。playPause()函数检查视频是否处于暂停状态，如果是则播放，否则暂停。stopVideo()函数则暂停视频并将当前时间设置为0，从而实现停止视频的效果。

上一篇：HTML常用标签有哪些？

下一篇：如何实现HTML响应式布局？