【HTML5】HTML5 多媒体标签 ② ( 视频标签 ＜video＞ | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )
admin 阅读： 2024-03-28
| 后台-插件-广告管理-内容页头部广告（手机） |
文章目录
- 一、HTML5 视频标签 video
- 二、视频标签 video 代码示例
- 1、基本示例
- 2、修改视频尺寸
- 三、视频标签 video 配置多个格式视频代码示例
一、HTML5 视频标签 video
HTML 5 的
- IE 浏览器 :
- 9.0 以上版本支持 mp4 格式 ;
- Firefox 浏览器 :
- 3.5 以上版本支持 ogg 格式 ;
- 4.0 以上版本支持 webM 格式 ;
- Opera 浏览器 :
- 10.5 以上版本支持 ogg 格式 ;
- 10.6 以上版本支持 webM 格式 ;
- Chrome 浏览器 :
- 5.0 以上支持 ogg / mp4 格式 ;
- 6.0 以上支持 webM 格式 ;
- Safari 浏览器 :
- 3.0 以上支持 mp4 格式 ;
可以在
如果浏览器的版本太老 , 什么格式都不支持 ;
视频标签 video 语法格式 :
<video src="url地址" controls="controls">video>- 1
视频标签 video 属性简介 :
- controls 属性 : 值为 controls , 启用控制按钮 , 由于在不同的浏览器中表现不同 , 一般情况下 , 不显示控制按钮 ;
- autoplay 属性 : 值为 autoplay , 在 Chrome 浏览器中 禁用自动播放 , 其它浏览器不禁用自动播放 ;
- 如果为视频设置静音播放 , 则可以在 Chrom 浏览器中 设置 autoplay 实现自动播放 ;
- muted 属性 : 值为 muted , 将视频设置为静音播放 ;
- 如果为视频设置静音播放 , 则可以在 Chrom 浏览器中 设置 autoplay 实现自动播放 ;
- width 属性 : 值为像素值 , 设置播放器宽度 ; 播放器的宽高建议只设置一个 , 避免失真 ;
- height 属性 : 值为像素值 , 设置播放器高度 ; 播放器的宽高建议只设置一个 , 避免失真 ;
- loop 属性 : 值为 loop , 设置播放器循环播放 ;
- poster 属性 : 值为 图片 url 路径 , 设置视频位置等待加载时的图片 ;
- preload 属性 :
- 设置 auto , 表示 预先加载视频 ;
- 设置 none , 表示 不预先加载视频 ;
二、视频标签 video 代码示例
1、基本示例
代码示例 :
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 视频标签示例title> <style> style> head> <body> <video src="media/fengjing.mp4" controls="controls">video> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
执行结果 :
-
默认状态 :
-
播放视频后效果 :
2、修改视频尺寸
通过修改 video 标签的宽度 , 修改视频尺寸 ;
video { width: 400px; }- 1
- 2
- 3
修改后的代码示例 :
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 视频标签示例title> <style> video { width: 400px; } style> head> <body> <video src="media/fengjing.mp4" controls="controls">video> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
显示效果 :
三、视频标签 video 配置多个格式视频代码示例
代码示例 :
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 视频标签示例title> <style> video { width: 400px; } style> head> <body> <video autoplay="autoplay" muted="muted" loop="loop" poster="media/pig.jpg"> <source src="media/fengjing.mp4" type="video/mp4" /> <source src="media/fengjing.ogg" type="video/ogg" /> 很抱歉 , 当前浏览器不支持现有视频格式 ~ video> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
执行结果 :
声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
在线投稿：投稿 站长QQ：1888636
| 后台-插件-广告管理-内容页尾部广告（手机） |
