HTML5新增标签Video

最新推荐文章于 2022-06-30 17:39:58 发布

X_dam

最新推荐文章于 2022-06-30 17:39:58 发布

阅读量814

点赞数

本文链接：https://blog.youkuaiyun.com/X_dam/article/details/103970306

版权

HTML5引入的video标签替代了Flash实现视频播放功能，支持MP4、Ogg、WebM格式。该标签拥有autoplay、muted、controls等属性，可用于自动播放、静音、显示控件等。此外，还可通过JavaScript控制play、pause方法，以及监听视频播放和暂停事件，自定义视频播放界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

H5新增了很多语义化标签，其中video标签就是，它取代了flash的视频效果，拥有了更多新功能

video标签

视频的地址用src引入，支持MP4、ovg、webm格式，是行内块元素。

属性

autoplay:自动播放，在浏览器中会被禁用，需要去浏览器设置，但是在静音状态下可以自动播放
muted : 设置静音
controls : 标签自带的控件，就是视频进度条那一栏，不同浏览器显示出来的功能不一样
loop : 视频是否循环播放
poster : 视频播放前的预览图片
ended : 是否播放到结尾
paused : 当前是否处于暂停状态
currentTime : 播放到的当前时间
duration : 影片的总时长

后四个是js控制的属性

方法

play( )：开始播放
pause( )：暂停播放

监视视频的播放和暂停事件

v1.onplay = function(){
   
	ad.style.display = 'none'
}

v1.onpause = function(){
   
	ad.style.display = 'block'
}

video案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.container{
    
				width: 640px;
				height: 360px;
				text-align: center;
				position: relative;
				margin: 200px auto;
			}
			#btn{
    
				position: absolute;
				right: 5px;
				top: 70%;
				cursor: pointer;
				opacity: 0.5;
			}
			#ad{
    
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -115px;
				margin-left: -109px;
				display:<