菜鸟教程学习——HTML5 video，audio,input(各种新元素)，output,datalist

<video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:即

MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

但是Hbuilder中有这八个选项：

网站示例：

可以暂停，放大。

同时可以添加这几个方法对视频进行操作：

<script>
var myVideo=document.getElementById("video1"); function playPause()
{if (myVideo.paused) myVideo.play(); else myVideo.pause(); }function makeBig()
{ myVideo.width=560; } function makeSmall()
{ myVideo.width=320; } function makeNormal()
{ myVideo.width=420; }
</script>

Audio属性同上。

接下来是input：color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week

<body><form action="">选择你喜欢的颜色: <input type="color" name="favcolor"><input type="submit"><br /><!--选择颜色-->生日: <input type="date" name="bday"><input type="submit"><br /><!--get年月日-->生日 (日期和时间): <input type="datetime" name="bdaytime"><input type="submit"><br /><!--没效果IE-->生日 (日期和时间): <input type="datetime-local" name="bdaytime"><input type="submit"><br /><!--get年月日和时间-->E-mail: <input type="email" name="usremail"><input type="submit"><br /><!--检查邮件格式是否正确-->生日 ( 月和年 ): <input type="month" name="bdaymonth"><input type="submit"><br /><!--get某年某月-->数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5"><input type="submit"><br /><!--get某一范围内的数字--><input type="number" name="points" min="0" max="10" step="3" value="6"><input type="submit"><br /><!--某一范围内，以step为3，每次进三的值，初始值为6value-->Points: <input type="range" name="points" min="1" max="10">
<input type="submit"><br /><!--某一数字范围内，的滑块-->Search Google: <input type="search" name="googlesearch"><input type="submit"><br><!--搜索框，没用IE-->电话号码: <input type="tel" name="usrtel"><input type="submit"><br>选择时间: <input type="time" name="usr_time"><input type="submit"><br /><!--get时间，几点几分-->添加你的主页: <input type="url" name="homepage"><input type="submit"><br><!--检测url是否格式正确-->选择周: <input type="week" name="year_week"><input type="submit"><!--get某年的第几个周--></form>

效果图展示：

对数字类型的限定：

属性	描述
disabled	规定输入字段是禁用的
max	规定允许的最大值
maxlength	规定输入字段的最大字符长度
min	规定允许的最小值
pattern	规定用于验证输入字段的模式
readonly	规定输入字段的值无法修改
required	规定输入字段的值是必需的
size	规定输入字段中的可见字符数
step	规定输入字段的合法数字间隔
value	规定输入字段的默认值

output：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>

datalist:

<input list="browsers" name="browser">
<datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari">
</datalist>

菜鸟教程学习——HTML5 video，audio,input(各种新元素)，output,datalist相关推荐

菜鸟教程学习——HTML5 拖放
无解释,纯代码示例: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> &l ...
菜鸟教程学习——html5 表单
整理自:http://www.runoob.com/html/html5-form-attributes.html 表单中,输入框的内容提交后,仍有记忆:autocomplete=on www.run ...
python菜鸟教程字典-python教程菜鸟教程学习路线
python教程菜鸟教程学习路线,需要学Python 环境搭建.Python 中文编码.Python 基础语法.Python 变量类型.Python 运算符.Python 条件语句.Python 循环 ...
python教程菜鸟教程学习路线
python教程菜鸟教程学习路线,需要学Python 环境搭建.Python 中文编码.Python 基础语法.Python 变量类型.Python 运算符.Python 条件语句.Python 循环 ...
Python基础教程-菜鸟教程学习笔记1
Python基础教程-菜鸟教程学习笔记1 文章目录 Python基础教程-菜鸟教程学习笔记1 前言 Python 简介 1. 第一个Python程序 2. Python 中文编码 3. 基本语法 1) ...
html5 video audio currentTime 设定失效、重头开始播放
正确答案 (2020.6.23更新) 在服务器里,根据请求,确定客户端请求的视频范围是多少,然后返回对应的请求内容,就可以实现点击调整视频音频播放进度里 ctx.set({// 'status': ' ...
python基础菜鸟教程-菜鸟教程学习python
1.杂货 *items(): 方法以列表返回可遍历的(键, 值) 元组数组. *在序列中遍历时,索引位置和对应值可以使用 enumerate()函数同时得到 *同时遍历两个或更多的序列,可以使用 zi ...
python菜鸟教程学习：数据结构
列表方法 list.append(x):把一个元素添加到列表的结尾,相当于 a[len(a):] = [x]. list.extend(L):通过添加指定列表的所有元素来扩充列表,相当于 a[len( ...
【C#】菜鸟教程学习笔记（二）
前言这部分似乎依然是跟C++差不多的内容,不过鉴于我之前一直在写套着C++外皮的C--这部分内容还是稍微复习一下吧(心虚) 十.C#封装封装: 把一个或多个项目封闭在一个物理的或者逻辑的包中.在面 ...

菜鸟教程学习——HTML5 video，audio,input(各种新元素)，output,datalist

菜鸟教程学习——HTML5 video，audio,input(各种新元素)，output,datalist相关推荐

最新文章

热门文章