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获得更丰富的资料。