码迷,mamicode.com
首页 > Windows程序 > 详细

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

时间:2018-02-24 15:36:06      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:前端

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"> 自定义验证

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

标签:前端

原文地址:http://blog.51cto.com/13517854/2072622

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!