HTML5 视频 Vedio 标签详解_html5

html5 引入了 <video> 标签，允许开发者在网页中直接嵌入视频文件，而不需要依赖第三方插件。本文将全面介绍 <video> 标签的各种属性，并通过实例代码详细说明其用法。

一、基础用法

1. 基本结构

html5 中使用 <video> 标签嵌入视频文件，最简单的形式如下：

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

在这个示例中，src 属性指定视频文件的路径，controls 属性使浏览器显示视频控件。

2. 示例代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html5 video example</title>
</head>
<body>
    <h1>html5 video example</h1>
    <video src="video-file.mp4" controls>
        your browser does not support the video element.
    </video>
</body>
</html>

这段代码将在网页上显示一个视频播放器，如果浏览器不支持 <video> 标签，将显示替代文本 “your browser does not support the video element.”。

二、属性详解

1. `src`

指定视频文件的 url，可以是相对路径或绝对路径。

<video src="path/to/your-video-file.mp4" controls></video>

2. `controls`

显示视频控件（播放、暂停、音量、全屏等）。

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

3. `autoplay`

视频文件在页面加载完成后自动播放。需要注意的是，为了用户体验，很多浏览器默认禁止自动播放，特别是移动设备。

<video src="video-file.mp4" controls autoplay></video>

4. `loop`

视频文件播放结束后自动重新播放。

<video src="video-file.mp4" controls loop></video>

5. `muted`

初始加载时将视频设置为静音。

<video src="video-file.mp4" controls muted></video>

6. `preload`

提示浏览器在页面加载时如何处理视频文件。可能的值有：

none：不预加载视频文件。
metadata：只预加载视频文件的元数据。
auto：浏览器选择最佳方式预加载视频文件。

<video src="video-file.mp4" controls preload="auto"></video>

7. `width` 和 `height`

设置视频播放器的宽度和高度（以像素为单位）。

<video src="video-file.mp4" controls width="640" height="360"></video>

8. `poster`

在视频播放之前显示的预览图像（封面图）。

<video src="video-file.mp4" controls poster="poster-image.jpg"></video>

9. `crossorigin`

控制跨域资源共享 (cors)，允许你配置是否可以加载跨域资源。

anonymous：不使用凭据。
use-credentials：使用凭据（如 cookies）。

<video src="video-file.mp4" controls crossorigin="anonymous"></video>

三、支持多种视频格式

由于不同浏览器对视频格式的支持不同，通常需要提供多种格式的视频文件，以确保兼容性。可以使用多个 <source> 标签来定义不同格式的视频文件。

<video controls width="640" height="360" poster="poster-image.jpg">
    <source src="video-file.mp4" type="video/mp4">
    <source src="video-file.webm" type="video/webm">
    <source src="video-file.ogv" type="video/ogg">
    your browser does not support the video element.
</video>

示例代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html5 video example with multiple formats</title>
</head>
<body>
    <h1>html5 video example with multiple formats</h1>
    <video controls width="640" height="360" poster="poster-image.jpg">
        <source src="video-file.mp4" type="video/mp4">
        <source src="video-file.webm" type="video/webm">
        <source src="video-file.ogv" type="video/ogg">
        your browser does not support the video element.
    </video>
</body>
</html>

四、使用 javascript 控制视频

html5 提供了丰富的 javascript api，可以用来控制视频播放。以下是一些常用的属性和方法：

1. 常用属性

video.currenttime：获取或设置当前播放时间（秒）。
video.duration：获取视频总时长（秒）。
video.paused：返回视频是否暂停。
video.volume：获取或设置音量（0.0 到 1.0）。
video.playbackrate：获取或设置播放速度。

2. 常用方法

video.play()：播放视频。
video.pause()：暂停视频。
video.load()：重新加载视频文件。
video.requestfullscreen()：全屏播放视频（需要浏览器支持）。

示例代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html5 video control with javascript</title>
</head>
<body>
    <h1>control html5 video with javascript</h1>
    <video id="myvideo" src="video-file.mp4" controls width="640" height="360"></video>
    <br>
    <button onclick="playvideo()">play</button>
    <button onclick="pausevideo()">pause</button>
    <button onclick="stopvideo()">stop</button>
    <button onclick="mutevideo()">mute/unmute</button>

    <script>
        var video = document.getelementbyid('myvideo');

        function playvideo() {
            video.play();
        }

        function pausevideo() {
            video.pause();
        }

        function stopvideo() {
            video.pause();
            video.currenttime = 0; // reset playback position to the start
        }

        function mutevideo() {
            video.muted = !video.muted; // toggle mute
        }
    </script>
</body>
</html>

在这个示例中，我们通过 javascript 控制视频的播放、暂停、停止和静音。video.pause() 方法用于暂停视频，video.currenttime = 0 将播放位置重置到开始。

五、使用 `<track>` 标签添加字幕

html5 提供了 <track> 标签，可以用来为视频添加字幕、章节标题、描述等。以下是一个添加字幕的示例：

示例代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html5 video with subtitles</title>
</head>
<body>
    <h1>html5 video with subtitles</h1>
    <video controls width="640" height="360">
        <source src="video-file.mp4" type="video/mp4">
        <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="english">
        your browser does not support the video element.
    </video>
</body>
</html>

在这个示例中，<track> 标签用于加载字幕文件。kind="subtitles" 指定轨道类型为字幕，srclang 指定字幕语言，label 为字幕轨道提供标签。

字幕文件 (.vtt 格式) 示例：

webvtt

1
00:00:00.000 --> 00:00:10.000
hello, welcome to our video tutorial.

2
00:00:10.000 --> 00:00:20.000
in this section, we will learn about html5 video.

HTML5 视频 Vedio 标签详解

一、基础用法

1. 基本结构

2. 示例代码

二、属性详解

1. `src`

2. `controls`

3. `autoplay`

4. `loop`

5. `muted`

6. `preload`

7. `width` 和 `height`

8. `poster`

9. `crossorigin`

三、支持多种视频格式

示例代码

四、使用 javascript 控制视频

1. 常用属性

2. 常用方法

示例代码

五、使用 `<track>` 标签添加字幕

示例代码

推荐阅读

7大常用Scrum管理工具软件

HTML5 WebSocket 编程入门指南（一）

HTML5 音频 Audio 标签详解

OpenCV 颜色检测

Html5播放hls格式的视频示例代码

Ubuntu怎么重置Root密码? ubuntu强制修改root密码的两种方法

猜你喜欢

发表评论

HTML5 视频 Vedio 标签详解

一、基础用法

1. 基本结构

2. 示例代码

二、属性详解

1. src

2. controls

3. autoplay

4. loop

5. muted

6. preload

7. width 和 height

8. poster

9. crossorigin

三、支持多种视频格式

示例代码

四、使用 javascript 控制视频

1. 常用属性

2. 常用方法

示例代码

五、使用 <track> 标签添加字幕

示例代码

推荐阅读

7大常用Scrum管理工具软件

HTML5 WebSocket 编程入门指南（一）

HTML5 音频 Audio 标签详解

OpenCV 颜色检测

Html5播放hls格式的视频示例代码

Ubuntu怎么重置Root密码? ubuntu强制修改root密码的两种方法

猜你喜欢

发表评论

1. `src`

2. `controls`

3. `autoplay`

4. `loop`

5. `muted`

6. `preload`

7. `width` 和 `height`

8. `poster`

9. `crossorigin`

五、使用 `<track>` 标签添加字幕