HTML 视频(Video)
HTML视频(Video)
HTML是一种用于组织Web页面中各个元素的标记语言,其中视频也是一种可以嵌入到网站中的元素。在HTML5中,
基本用法
以下是嵌入视频的基本格式:
<video src="path/to/video.mp4"></video>
其中,src
是视频文件的路径。浏览器会自动选择最适合当前环境的格式(例如mp4,webm或ogg等)进行播放。
控件
<video>
元素本身不包含任何控件,因此需要自己添加控件,方便用户控制播放、暂停等操作。以下是一个示例代码,其中添加了控件:
<video src="path/to/video.mp4" controls></video>
controls
属性添加了浏览器自带的播放器控件,包括播放/暂停按钮、进度条、音量控制等。另外,还可以使用其他属性来定制控件,例如 width(宽度)、height(高度)和 poster(视频开始前显示的图片)。
事件和方法
由于视频不同于其他HTML元素,具有自身的状态和行为。因此,可以使用事件和方法来与视频交互,如下:
const video = document.querySelector('video');
video.play(); //播放
video.pause(); //暂停
video.currentTime; //获取当前时间
video.duration; //获取视频总时长
video.addEventListener('timeupdate', function() {
// 在视频播放时更新进度条
});
timeupdate
事件在视频播放时反复触发,以便更新进度条等进展指示器。
更多关于HTML 视频(Video)的信息,您可以访问MDN web docs获得更丰富的资料。