Html5视频、音频、API控件---第二天

最新推荐文章于 2025-09-10 19:44:49 发布

weixin_33721427

最新推荐文章于 2025-09-10 19:44:49 发布

阅读量54

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/13517854/2072622

本文详细介绍了HTML5中的video和audio标签及其常用属性，包括如何利用这些标签实现视频自动播放、显示播放控件等功能。此外，还介绍了HTML5表单中新增的输入类型及元素，如email、tel等格式的输入，以及datalist、keygen等表单元素的使用方法。

1、video、audio标签
<video src = "movie.mp4" controls = "controls"><video>
或者<video controls = "controls">
<source src = "movie.mp4">
<video>
属性值描述
autoplay autoplay（可省略）视频自动播放
controls controls（可省略）向用户显示播放控件
width px 播放器宽度
height px 播放器高度
loop loop、数字播放完是否继续播放、播放次数
preload proload 是否等待加载完再播放
src url 视频url地址
poster imgurl 加载等待的画面图片
autobuffer autobuffer 设置为浏览器缓冲方式，不设置autoplay时有效
2、HTML5视频API 控件
（1）获得video标签
①通过DOM对象 var video = document.getElementById("videoID");
②通过jQuery 的方法 var video = $("#videoID")[0];
video标签的属性
载入视频：load()
播放视频：play()
暂停:pause()
快进10秒：currentTime +=10
播放速度增加：playbackRate ++
播放速度增加0.1：playbackRate += 0.1
音量增加：volume += 0.1
静音：muted = true
（3）事件
canplay
duration 媒体长度
timeupdate 媒体当前位置
三、表单
1、表单输入类型
类型使用示例含义
email <input type="email"> 输入邮箱格式
tel <input type="tel"> 输入手机号码格式
url <input type="url"> 输入url格式
number <input type="number"> 输入数字格式
search <input type="search"> 搜索框（体现语义化）
range <input type="range"> 自由拖动滑块
color <input type="color"> 拾色器
time <input type="time"> 小时
date <input type="date"> 年月日
datetime <input type="datetime"> 时间输入框
month <input type="month"> 年月
week <input type="week"> 年周

2、表单元素
元素含义
<datalist> 数据列表
<keygen> 生成加密字符串
<output> 输出结果
<meter> 度量器
3、表单属性
属性用法含义
placeholder <input type="text" placeholder="请输入用户名"> 占位符
autofocus <input type="text" autofocus> 自动获得焦点
multiple <input type="file" multiple> 多文件上传
autocomplete <input type="text" autocomplete="off"> 值：off、on 自动完成
form <input type="text" form="某表单ID">
novalidate <form novalidate></form> 关闭验证
required <input type="text" required> 必填项
pattern <input type="text" pattern="\d"> 自定义验证

转载于:https://blog.51cto.com/13517854/2072622