【HTML|第1期】HTML5视频（Video）元素详解：从起源到应用

news2024/11/17 10:46:59

日期：2024年9月9日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉在这里插入代码片得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

文章目录

一、前言
二、HTML5视频（Video）元素的由来
三、什么是HTML5视频（Video）元素
四、如何使用HTML5视频（Video）元素
五、HTML5视频（Video）元素的常用属性、方法与事件
- 1、常用属性
- 2、常用方法
- 3、常用事件
六、实例演示
七、结语

在这里插入图片描述

一、前言

在当今的互联网世界，视频内容占据了极大的比重。无论是教育、娱乐还是信息传播，视频都是一个不可或缺的部分。而 HTML5 的 <video> 元素，就像一把万能钥匙，让开发者能够轻松地在网页上嵌入和播放视频。今天，我们就来一起探索 <video> 元素的奥秘。

二、HTML5视频（Video）元素的由来

在 HTML5 出现之前，网页播放视频主要依赖于 Adobe Flash 等插件技术。然而，Flash 的种种弊端（如安全漏洞、性能问题以及不兼容移动设备）让开发者们头痛不已。为了解决这些问题，HTML5 应运而生，其中的 <video> 元素为我们提供了一种无需插件即可在网页上播放视频的标准方法。

三、什么是HTML5视频（Video）元素

HTML5 的<video>元素是一个用于嵌入视频的标准元素，它使得在网页中嵌入视频变得异常简单。通过<video>元素，我们可以轻松地在网页上展示视频内容，并提供丰富的API供开发者控制视频播放。

四、如何使用HTML5视频（Video）元素

下面，让我们来看看如何使用<video>元素在网页中嵌入视频。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持Video标签。
</video>

在这个例子中，<source>标签指定了视频文件的路径和类型，controls属性则提供了播放控件。

五、HTML5视频（Video）元素的常用属性、方法与事件

1、常用属性

属性	说明
`src`	视频文件的路径。
`controls`	显示播放控件。
`width`和`height`	设置视频播放器的宽度和高度。
`autoplay`	视频在就绪后马上播放。
`loop`	视频在结束时重新开始播放。
`muted`	视频默认静音。
`poster`	在视频加载时显示的图片。
`preload`	视频是否预加载，可取值为`auto`、`metadata`或`none`。

2、常用方法

方法	说明
`play()`	开始播放视频。
`pause()`	暂停当前播放的视频。
`load()`	重新加载视频元素。
`canPlayType()`	检测浏览器是否能够播放指定的视频类型。

3、常用事件

事件	说明
`onloadstart`	在视频开始加载时触发。
`oncanplay`	在视频可以播放时触发。
`onplay`	在视频开始播放时触发。
`onpause`	在视频暂停时触发。
`onended`	在视频播放结束时触发。

六、实例演示

最后，让我们通过一个实例来展示如何使用 HTML5 视频（Video）元素。

以下是一个简单的 HTML5 视频播放器的例子：

<video id="myVideo" width="320" height="240" controls poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持Video标签。
</video>

<script>
  var video = document.getElementById('myVideo');

  video.addEventListener('loadedmetadata', function() {
    console.log('视频长度：' + video.duration + '秒');
  });

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

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

  function restartVideo() {
    video.currentTime = 0;
    video.play();
  }
</script>

<button onclick="playVideo()">播放</button>
<button onclick="pauseVideo()">暂停</button>
<button onclick="restartVideo()">重新开始</button>