HTML5 Video(视频)学习笔记

简介

HTML5 的 <video> 元素使得在网页中嵌入视频变得轻而易举。

通过 <video> 元素，我们可以方便地嵌入视频文件，并提供播放控制，以及对视频的一些设置和操作。

以下是一些常用的 <video> 属性：

• src：指定视频文件的路径
• width 和 height：指定视频播放区域的宽度和高度
• autoplay：指定视频是否自动播放
• controls：指定是否显示播放控制条
• loop：指定视频是否循环播放
• preload：指定视频是否在页面加载时预加载

实例

以下是一个简单的实例，展示如何使用 <video> 元素嵌入视频文件并进行播放控制：

htmlCopy Code
<video src="example.mp4" width="640" height="360" controls></video>

在这个实例中，我们嵌入了一个名为 "example.mp4" 的视频文件，并设置了宽度为 640 像素、高度为 360 像素，并且显示播放控制条。

除此之外，我们还可以通过 JavaScript 来控制视频的播放、暂停、音量等操作。例如：

javascriptCopy Code
var video = document.querySelector('video');
video.play(); // 播放视频
video.pause(); // 暂停视频
video.volume = 0.5; // 设置音量为一半

总结

HTML5 的 <video> 元素让嵌入视频变得简单而高效，并且提供了丰富的功能和控制选项。我们可以使用它来嵌入各种类型的视频文件，例如 MP4、WebM、Ogg 等等，并通过 JavaScript 来实现更加复杂的操作和交互效果。