ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML 5 基础

2019-08-13 13:56:28  阅读:291  来源: 互联网

标签:属性 音频 基础 controls 选取 HTML 播放 autoplay


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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有