HTML中的视频值

HTML标准提供了<video>元素，用于在网页中嵌入视频内容。在<video>元素中，我们可以指定视频的源文件地址、播放控制、缩略图等属性。

基本用法

下面是一个最简单的<video>元素的例子：

<video src="video.mp4"></video>

其中，src属性指定了视频文件的地址，这里使用了MP4格式。这个简单的元素会自动播放视频，以默认的控制条控制播放、暂停。

我们也可以在<video>元素中设置controls属性以显示浏览器默认的视频控制条：

<video src="video.mp4" controls></video>

媒体类型

HTML5开发组定义了一组媒体类型（也称MIME类型），来描述不同类型的媒体文件。为了确保视频能够正确地呈现和播放，我们应该在<video>元素的type属性中指定对应媒体类型，这样浏览器可以确定最适合的播放器。

下面是常见的媒体类型：

• video/mp4：MPEG-4视频文件格式
• video/ogg：Ogg视频文件格式
• video/webm：WebM视频格式
• video/x-msvideo：AVI视频格式

指定媒体类型的方式如下：

<video src="video.mp4" type="video/mp4"></video>

也可以在单个<video>元素中使用多个源，以便在浏览器不支持特定格式时使用备用格式：

<video>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
</video>

在此情况下，浏览器将根据优先级选择最佳的媒体类型。

控制视频

默认情况下，浏览器会提供一个简单的控制条，可以控制视频的暂停、播放、音量、快进和快退。但是我们可以使用JavaScript来控制视频的行为，例如进度条和自定义播放按钮等。

我们可以使用JavaScript代码来获取视频元素，然后根据需要更新控制条或其他UI元素。例如，要在点击自定义播放按钮时启动或停止视频的播放，可以编写类似下面的代码：

var video = document.querySelector('video');
var playButton = document.querySelector('.play-button');

playButton.addEventListener('click', function() {
  if(video.paused) {
    video.play();
  } else {
    video.pause();
  }
});

在上面的代码中，我们使用document.querySelector()方法获取了视频和播放按钮元素，并将一个单击事件添加到播放按钮。

HTML5视频API

HTML5视频API为我们提供了一些最基本的方法和属性来控制嵌入的视频。

属性

以下属性可用于<video>元素：

• paused：Boolean类型，指示视频是否处于暂停状态
• duration：Number类型，包含视频的总长度（以秒为单位）
• currentTime：Number类型，包含视频的当前播放时间（以秒为单位）
• volume：Number类型，指示视频的音量（介于0和1之间）

以下属性可用于<video>的控制栏中：

• playbackRate：Number类型，指定播放速度（例如2意味着播放速度是正常速度的两倍）
• muted：Boolean类型，指示音频是否已静音

方法

以下方法可用于<video>元素：

• play()：开始播放视频
• pause()：暂停视频的播放

以下方法可用于<video>的控制栏中：

• load()：重新加载视频
• canPlayType(type)：Boolean类型，指示浏览器是否能够播放指定类型的视频

结论

HTML中的视频值使得在网页中嵌入视频变得更加容易，我们只需要简单的<video>标签即可。通过HTML5的API，我们可以进一步控制视频的行为，更加个性化地呈现视频内容。