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

日期：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、常用属性

2、常用方法

3、常用事件

六、实例演示

最后，让我们通过一个实例来展示如何使用 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>

在这个例子中，我们创建了一个带有播放、暂停和重新开始按钮的视频播放器。通过 JavaScript，我们添加了几个事件监听器和函数来控制视频的播放。

七、结语

HTML5 视频（ Video）元素为我们提供了一种简便、高效的方式来在网页中嵌入和播放视频。掌握它的用法，将使你的网页更加生动有趣。

参考文章：

• 《MDN Web Docs - <video>》
• 《W3School - HTML5 Video Tutorial》

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/142553598