HTML5新增标签Video

最新推荐文章于 2022-12-13 16:12:13 发布

X_dam

最新推荐文章于 2022-12-13 16:12:13 发布

阅读量742

点赞数

本文链接：https://blog.csdn.net/X_dam/article/details/103970306

版权

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:<

最低0.47元/天解锁文章

X_dam

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增标签Video

H5新增了很多语义化标签，其中video标签就是，它取代了flash的视频效果，拥有了更多新功能video标签视频的地址用src引入，支持MP4、ovg、webm格式，是行内块元素。属性autoplay:自动播放，在浏览器中会被禁用，需要去浏览器设置，但是在静音状态下可以自动播放muted : 设置静音controls : 标签自带的控件，就是视频进度条那一栏，不同浏览...
复制链接

扫一扫