其他分享
首页 > 其他分享> > HTML 5 基础

HTML 5 基础

作者:互联网

HTML 参考手册

HTML 5 视频

controls 属性供添加播放、暂停和音量控件。
<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:
<video id="video" width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>


属性                  值               描述
autoplay       autoplay     如果出现该属性,则视频在就绪后马上播放。
controls        controls        如果出现该属性,则向用户显示控件,比如播放按钮。
height       pixels             设置视频播放器的高度。
loop              loop              如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload     preload     如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
src             url             要播放的视频的 URL。
width       pixels              设置视频播放器的宽度。

Video + DOM
var myVideo=document.getElementById("video");
myVideo.play(); 
myVideo.pause(); 
myVideo.width=320; 

HTML 5 音频

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:
<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

属性              值                  描述
autoplay        autoplay        如果出现该属性,则音频在就绪后马上播放。
controls        controls        如果出现该属性,则向用户显示控件,比如播放按钮。
loop                loop                如果出现该属性,则每当音频结束时重新开始播放。
preload     preload     如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
src             url             要播放的音频的 URL。

HTML5 Input 类型

E-mail: <input type="email" name="user_email" />    //在提交表单时,会自动验证 email 域的值。
Homepage: <input type="url" name="user_url" />    //在提交表单时,会自动验证 url 域的值。
Points: <input type="number" name="points" min="1" max="10" />
Points: <input type="number" name="points" min="1" max="10" />    //range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
Date: <input type="date" name="user_date" />    //日期选择器
HTML5 拥有多个可供选取日期和时间的新输入类型:
    date - 选取日、月、年
    month - 选取月、年
    week - 选取周和年
    time - 选取时间(小时和分钟)
    datetime - 选取时间、日、月、年(UTC 时间)
    datetime-local - 选取时间、日、月、年(本地时间)

标签:属性,音频,基础,controls,选取,HTML,播放,autoplay
来源: https://www.cnblogs.com/loveer/p/11345417.html