首页 > 其他分享 >【HTML|第1期】HTML5视频(Video)元素详解:从起源到应用

【HTML|第1期】HTML5视频(Video)元素详解:从起源到应用

时间:2024-09-28 18:21:23浏览次数:9  
标签:视频 元素 HTML Video HTML5 video 播放

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


文章目录


在这里插入图片描述


一、前言


在当今的互联网世界,视频内容占据了极大的比重。无论是教育、娱乐还是信息传播,视频都是一个不可或缺的部分。而 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显示播放控件。
widthheight设置视频播放器的宽度和高度。
autoplay视频在就绪后马上播放。
loop视频在结束时重新开始播放。
muted视频默认静音。
poster在视频加载时显示的图片。
preload视频是否预加载,可取值为autometadatanone

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>

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

七、结语


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


参考文章:


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

标签:视频,元素,HTML,Video,HTML5,video,播放
From: https://blog.csdn.net/qq_35844043/article/details/142553598

相关文章

  • HTML中常用的编排表单标签和以块级元素、内联(行内)元素!
    #本文详细介绍HTML中列表标签中表单<form></form>和块级元素、内联元素的使用#一、常用的编排表单标签1、表单标签①前言HTML中的表单是用于收集用户输入信息并将其提交给服务器进行处理的重要元素。②表单标签<form>表单由<form>标签开始,以</form>标签结束。在<f......
  • 解锁视频生成新时代! 探索智谱CogVideoX-2b:轻松生成6秒视频的详细指南
    文章目录一、CogVideoX的诞生背景二、创建丹摩平台实例三、环境配置与依赖安装四、模型文件与配置五、模型运行六、使用Web界面生成视频一、CogVideoX的诞生背景CogVideoX的推出标志着视频生成技术进入了一个全新的阶段。在视频生成领域,长期以来一直存在效率......
  • HTML常用标签(第四课)
     清楚认识标签的语义,即标签的含义,以便在合适的地方写上合理的标签,让网页结构更加清晰目录一、标题标签二、段落标签三、换行标签​综合案例四、文本格式化标签五、div标签和span标签六、图像标签七、图片路径八、超链接标签九、注释标签十、特殊字符综合案例......
  • HTML表单相关知识(第七课)
    目录一、表单的初步认识二、组成部分1、表单域2、表单控件①input输入表单元素②select下拉表单元素③textarea文本域表单元素三、综合案例一、表单的初步认识作用:方便收集用户信息,让页面和用户实现交互组成部分:表单域、表单控件、提示信息二、组成部分1、表单......
  • OpenCV视频I/O(3)视频采集类VideoCapture之获取当前使用的视频捕获 API 后端的名称函数
    操作系统:ubuntu22.04OpenCV版本:OpenCV4.9IDE:VisualStudioCode编程语言:C++11算法描述getBackendName函数是OpenCV中VideoCapture类的一个方法,用于获取当前使用的视频捕获API后端的名称。这可以帮助开发者了解当前VideoCapture实例正在使用哪个后端来处理视......
  • OpenCV视频I/O(2)视频采集类VideoCapture之检索视频流的各种属性函数get()的使用
    操作系统:ubuntu22.04OpenCV版本:OpenCV4.9IDE:VisualStudioCode编程语言:C++11算法描述返回指定的VideoCapture属性。VideoCapture的get()函数用于检索视频流的各种属性。这个函数允许你查询视频源的状态和配置,例如分辨率、帧率等。函数原型virtualdoublec......
  • HTML+CSS 常见效果
    静态图片动画html<divclass="loader">Loading…</div>css@keyframesloader{to{background-position:-800px0;}}.loader{width:100px;height:100p......
  • 495. 响应式潮流小游戏网页 大学生期末大作业 Web前端网页制作 html+css+js
    目录一、网页概述二、网页文件 三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界!这里有各行各业的Web前端网页制作的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这......
  • HTML和CSS中的浮动以及边框塌陷解决方案(内置练习及答案)
    一、浮动概述在HTML和CSS中,“浮动”(Float)是一种布局技术,它允许元素脱离其正常的文档流,向左或向右移动,直到它的外边缘碰到包含框或另一个浮动元素的边缘。浮动元素仍然保持块级盒模型的特性(如可以设置宽度和高度),但是它们不再占据文档流中的空间,这意呀着文档中的其他元素会......
  • HTML5实现大文件分片上传实例
    前端:vue2,vue3,vue-cli,html5,webuploader后端:asp.net,jsp,springboot,php,数据库:MySQL,Oracle,SQLServer,达梦,人大金仓,国产数据库功能:超大文件上传,文件和文件夹批量上传,断点续传,加密上传,视频上传技术:百度webuploader,分块,切片,断点续传,秒传,MD5验证,纯JS实现,支持第三方......