【HTML|第1期】HTML5视频（Video）元素详解：从劈头到应用
日期：2024年9月9日作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：假如您觉在这里插入代码片得有所资助，资助点个赞，也可以关注我，我们一起成长；假如有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01365 = 37.7834；0.99365 = 0.0255
1.02365 = 1377.4083；0.98365 = 0.0006
https://i-blog.csdnimg.cn/direct/2fb815f7eb554f7b851c4974df08faca.jpeg
一、媒介
在当今的互联网世界，视频内容占据了极大的比重。无论是教育、娱乐还是信息传播，视频都是一个不可或缺的部分。而 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>
在这个例子中，我们创建了一个带有播放、暂停和重新开始按钮的视频播放器。通过 JavaScript，我们添加了几个事件监听器和函数来控制视频的播放。
七、结语
HTML5 视频（ Video）元素为我们提供了一种轻便、高效的方式来在网页中嵌入和播放视频。把握它的用法，将使你的网页更加生动风趣。
参考文章：
[*]《MDN Web Docs - <video>》
[*]《W3School - HTML5 Video Tutorial》
版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/142553598
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]