如何使用HTML5视频标签播放本地（硬盘）视频文件

HTML5的出现为网页开发者带来了许多新的功能和特性，其中之一就是视频标签。通过使用HTML5的视频标签，我们可以在网页上直接播放视频文件，而不必依赖于第三方插件或者其他技术。本文将介绍如何使用HTML5视频标签来播放本地（硬盘）视频文件。

HTML5视频标签的基本用法

HTML5的视频标签是`<video>`，它可以在网页上嵌入一个视频文件，并提供了一些属性和方法来控制视频的播放。

首先，我们需要创建一个`<video>`元素，并设置宽度和高度，以及一些其他属性，例如`controls`属性可以显示一个控制条，`autoplay`属性可以自动播放视频。下面是一个基本的示例：

```html

<video width="640" height="480" controls autoplay>

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

  Your browser does not support the video tag.

</video>

```

在上面的示例中，我们使用了`<source>`标签来指定视频文件的路径和类型。`src`属性指定视频文件的路径，`type`属性指定视频文件的类型。如果浏览器不支持`<video>`标签，那么会显示`Your browser does not support the video tag.`这段文字。

注意：视频文件的路径可以是相对路径或者绝对路径，如果视频文件和HTML文件在同一个目录下，可以直接使用文件名作为路径。如果视频文件在其他目录下，需要使用相对路径或者绝对路径。

自定义视频控制样式

`<video>`标签提供了一些默认的控制样式，但是我们也可以通过CSS来自定义视频控制样式，使其更符合网页的设计风格。

首先，我们可以使用`::media-controls`伪元素来选择视频控制条，然后通过修改它的样式来实现自定义。例如，我们可以将控制条的背景颜色改成红色，将按钮的颜色改成白色：

```css

video::-webkit-media-controls {

  background-color: red;

}

video::-webkit-media-controls-play-button {

  color: white;

}

```

上面的CSS代码中，`-webkit-`前缀是为了兼容一些老版本的浏览器。如果你只关注最新版本的浏览器，可以省略这个前缀。

播放本地（硬盘）视频文件

在默认情况下，`<video>`标签只能播放网络上的视频文件，而不能播放本地（硬盘）视频文件。这是因为出于安全考虑，浏览器限制了对本地文件的访问。

但是，有一种方法可以绕过这个限制，就是使用File API。File API是HTML5提供的一个API，可以让我们在网页上操作本地文件。

首先，我们需要创建一个`<input type="file">`元素，用于选择本地视频文件。然后，通过监听`change`事件来获取用户选择的文件。一旦用户选择了文件，我们就可以通过`URL.createObjectURL()`方法来创建一个临时的URL，然后将这个URL赋值给`<video>`标签的`src`属性，从而实现播放本地视频文件的功能。下面是一个示例：

```html

<input type="file" id="videoFile" accept="video/*">

<video id="videoPlayer" width="640" height="480" controls></video>

<script>

  document.getElementById('videoFile').addEventListener('change', function(event) {

    var video = document.getElementById('videoPlayer');

    var file = event.target.files[0];

    var url = URL.createObjectURL(file);

    video.src = url;

  });

</script>

```

在上面的示例中，我们使用了`accept`属性来限制用户只能选择视频文件。通过监听`change`事件，当用户选择了