HTML5+CSS3（2）
一、视频与音频
1.用JavaScript检测音频格式支持
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type/javascript>
function checkAudio(){
var myAudio = document.createElement('audio');
if (myAudio.canPlayType) {
if ( "" != myAudio.canPlayType('audio/mpeg')) {
document.write("您的浏览器支持mp3编码。<br>");
}
if ( "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"')){
document.write("您的浏览器支持oog编码。<br>");
}
if ( "" != myAudio.canPlayType('audio/mp4; codecs="mp4a.40.5"')) { document.write("您的浏览器支持aac编码。");
}
}
else {
document.write("您的浏览器不支持要检测的音频格式。");
}
}
window.onload=function() {
checkAudio();
}
</script>
</head> <body> </body> </html>
2.播放音频
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<audio src="medias/Wah Game Loop.mp3" controls="controls">
您的浏览器不支持audio标签！
</audio>
</body>
</html>
另一种方式插入多个音频
<audio controls>
<source src="medias/Wah Game Loop.ogg"></source>
<source src="medias/Wah Game Loop.mp3"></source>
您的浏览器不支持audio标签！
</audio>
3.播放视频
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<video controls>
<source src="medias/volcano.mp4"></source>
您的浏览器不支持video标签
</video>
</body>
</html>
- load()：该函数可以加载音频或视频文件，为播放做准备。通常情况下不必调用，除非是动态生成的元素，用来在播放前预加载。
- paly()：该函数可以加载并播放音频或者视频文件，除非音频或视频文件已经暂停在其他位了，否则默认从开头播放。
- pause()：该函数暂停处于播放状态的音频或视频文件。
- canPlayType(type)：该函数检测video元素是否支持给定MIME类型的文件。
4.音频与视频相关事件
二、sessionStorage和localStorage区别
1.区别
2.设计计数器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计数器</title>
</head>
<body>
<script type="text/javascript">
if(localStorage.pagecount){
localStorage.pagecount=Number(localStorage.pagecount)+1; }else{
localStorage.pagecount=1;
}
document.write("总访问数：<br />"+localStorage.pagecount)+1;
if(sessionStorage.pagecount){
sessionStorage.pagecount=Number(sessionStorage.pagecount)+1; }else{
sessionStorage.pagecount=1;
}
document.write("<br />当前会话内访问数：<br />"+sessionStorage.pagecount);
</script>
</body>
</html>
关闭窗口，重新打开，效果如下：
3.跟踪localStorage数据
HTML代码
<!DOCTYPE html>
<html>
<head>
<title>sessionStorage</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script language="javascript" src="js/1.js"></script>
<script language="javascript">
var t = new bwTable();
var db = getSessionStorage() || dispError('Session Storage not supported.'); function getSessionStorage() {
try {
if( !! window.sessionStorage ) return window.sessionStorage;
} catch(e) {
return undefined;
}
} function dispResults() {
if(errorMessage) {
element('results').innerHTML = errorMessage;
return;
} var t = new bwTable();
t.addRow( ['traveler', db.getItem('traveler')] );
t.addRow( ['destination', db.getItem('destination')] );
t.addRow( ['transportation', db.getItem('transportation')] );
element('results').innerHTML = t.getTableHTML();
} function dbGo() {
if(errorMessage) return;
var f = element('travelForm');
db.setItem('traveler', f.elements['traveler'].value);
db.setItem('destination', f.elements['destination'].value);
db.setItem('transportation', f.elements['transportation'].value);
dispResults();
} function dbClear() {
if(errorMessage) return;
db.clear();
dispResults();
} function initDisp() {
dispResults();
} window.onload = function() {
initDisp();
}
</script>
</head> <body>
<div id="content">
<h1> sessionStorage</h1>
<div id="form">
<form id="travelForm">
<table class="form">
<tr>
<td class="label"> Traveler </td>
<td><input type="text" name="traveler" /></td>
</tr>
<tr>
<td class="label"> Destination </td>
<td><input type="text" name="destination" /></td>
</tr>
<tr>
<td class="label"> Transportation </td>
<td><input type="text" name="transportation" /></td>
</tr>
<tr>
<td colspan="2" class="button"><input id="formSubmit" type="button" value="Clear" onClick="javascript:dbClear()" />
<input id="formSubmit" type="button" value="Go" onClick="javascript:dbGo()" /></td>
</tr>
</table>
<input id="inputAction" type="hidden" name="action" value="add" />
<input id="inputKey" type="hidden" name="key" value="0" />
</form>
</div>
<div id="results">
</div>
</div>
</body>
</html>
CSS代码
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, table, tr, td,
p, blockquote, address, time, span, em, strong, img, ol, ul, li, dl, dt, figure, canvas, video {
margin: 0;
padding: 0;
border: 0;
} body {
font-family: Georgia, serif;
background-color: #3c6b92;
} .red {
color: #cb202a;
} p.message, p.error {
font: normal 1em Helvetica, Arial, sans-serif;
padding: 0 3px;
} p.message {
border: 1px solid #995522;
background-color: #e1d8b9;
color: black;
} p.error {
border: 1px solid #193742;
background-color: #cb202a;
color: white;
} #content {
width: 85%;
margin: 20px auto;
padding: 5px;
background-color: white;
min-height: 300px;
} #content h1, #content h2 {
font: normal 1.4em Helvetica, Arial, sans-serif;
color: #3c6b92;
} #content p, h1, h2, h3 {
margin-bottom: .5em;
} #content h1 {
border-bottom: solid 2px #3c6b92;
} #content h2.error {
color: #cb7d20;
} .bwTable {
background: #c3cebc;
margin-bottom: .5em;
border: 1px solid #995522;
border-collapse: collapse;
} .bwTable tr, .bwTable td, .bwTable th {
font: normal 1em Helvetica, Arial, sans-serif;
text-align: left;
border: solid 1px #995522;
padding: 1px 3px;
} .bwTable tr:nth-child(odd) {
background: #e1d8b9;
} .bwTable th {
background: #193742;
color: #c3cebc;
border: solid 1px #51341a;
} .bwTable td {
min-width: 100px;
} #form {
margin-bottom: 10px;
border-bottom: 2px solid #3c6b92;
} #form input[type=text] {
width: 300px;
} #form td.button, #form td.label {
text-align: right;
} #form td.label {
padding-right: 3px;
}
JavaScript代码
var element = function(id) { return document.getElementById(id); }
var errorMessage = undefined;
function getOpenDatabase() {
try {
if( !! window.openDatabase ) return window.openDatabase;
else return undefined;
} catch(e) {
return undefined;
}
}
function getLocalStorage() {
try {
if( !! window.localStorage ) return window.localStorage;
else return undefined;
} catch(e) {
return undefined;
}
}
function getSessionStorage() {
try {
if( !! window.sessionStorage ) return window.sessionStorage;
else return undefined;
} catch(e) {
return undefined;
}
}
function dispError( message ) {
errorMessage = '<p class="error">' + message + '</p>';
haveError = true;
}
function bwTable( wrap ) {
this.wrap = ( wrap == undefined ) ? true : wrap; // default to true
this.rows = new Array();
this.header = [];
this.setHeader = function( row ) {
this.header = row;
}
this.addRow = function( row ) {
this.rows.push(row);
}
this.getRow = function ( index ) {
return this.rows[index];
}
this.countRows = function () {
return this.rows.length;
}
this.getTableHTML = function () {
var a = '';
if(this.wrap) a += '<table class="bwTable">\n';
a += this.getHeaderHTML();
for(var row in this.rows) {
a += this.getRowHTML(this.rows[row]);
}
if(this.wrap) a += '</table>\n';
return a;
}
this.getHeaderHTML = function () {
if( this.header.length == 0 ) return '';
var a = '<tr>';
for( var cell in this.header ) {
a += '<th>' + this.header[cell] + '</th>';
}
a += '</tr>\n';
return a;
}
this.getRowHTML = function (row ) {
var a = '<tr>';
for( var cell in row ) {
var v= row[cell];
if(v == null) v = '<span class="red">NULL</span>';
a += '<td>' + v + '</td>';
}
a += '</tr>\n';
return a;
}
this.writeTable = function () {
document.write(this.getTableHTML());
}
}
运行结果
HTML5+CSS3（2）的更多相关文章
- 前端笔记之HTML5&CSS3（上）新特性&音频视频&本地存储&自定义属性
一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...
- 前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画
一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...
- 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- 菜鸟学习HTML5+CSS3（一）
主要内容: 1.新的文档类型声明(DTD) 2.新增的HTML5标签 3.删除的HTML标签 4.重新定义的HTML标签 一.新的文档类型声明(DTD) HTML 5的DTD声明为:<!d ...
- HTML5+CSS3（3）
一.CSS3新增属性用法整理 1.box-shadow(阴影效果) 2.border-color(为边框设置多种颜色) 3.border-image(图片边框) 4.text-shadow(文本阴影) ...
- HTML5漫谈（7）——如何保护HTML5应用代码
独家供稿:移动Labs HTML5应用采用的仍然是Javascript(JS).HTML.CSS 等Web语言,因而其代码保护就是这些Web代码的保护,而HTML5应用主要功能一般采用JS实现,因此J ...
- HTML5 Canvas（画布）实战编程初级篇：基本介绍和基础画布元素
欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制 ...
- 使用HTML5画布（canvas）生成阴影效果
来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...
- HTML5测试（二）
HTML5测试(四) 1.input 元素中,下列哪个类型属性定义了输入电话号码的控件? A.mob B.tel C.mobile D.telephone 答案:B 具有 type 属性的 input ...
随机推荐
- word2007无法打开.doc
如果您的WORD2007无法打开.DOC文档,可以试试如下的方法 打开注册表编辑器(开始-运行-输入regedit VISTA中在开始菜单最下方的搜索栏内输入regedit) 展开HKEY_CLASS ...
- js处理数字加后缀w
num > 9999 ? (Math.floor(num/1000)/10) + 'w' : num
- promise在angular中的基本使用
promise在angular中的基本使用 <!DOCTYPE html> <html ng-app="myApp"> <head> <m ...
- windows远程登录报错 CredSSP不支持Oracle
https://support.microsoft.com/en-us/help/4093492/credssp-updates-for-cve-2018-0886-march-13-2018
- java-使用Jacob实现office转换成pdf
参考路径: https://blog.csdn.net/csdnFlyFun/article/details/79523262#commentBox Jacob组件下载地址:https://sourc ...
- Hbase数据库
1.简介 HBase从诞生至今将近10年,在apache基金会的孵化下,已经变成一个非常成熟的项目,也有许多不同的公司支持着许多不同的分支版本,如cloudra等等. HBase不同于一般的关 ...
- flutter mac 下安装
- NLP VS NLU
NLP(Natural Language Processing )自然语言处理:是计算机科学,人工智能和语言学的交叉领域.目标是让计算机处理或“理解”自然语言,以执行语言翻译和问题回答等任务.NLU ...
- SpringMVC Mybatis Spring
Spring MVC Mybatis整合过程中 Mapper.java 不需要使用 @componenet, Service 等spring注解 但是在service 中创建mapper对象的时候是需 ...
- stm32之中断配置
一.stm32的中断和异常 Cortex拥有强大的异常响应系统,它能够打断当前代码执行流程事件分为异常和中断,它们用一个表管理起来,编号为0~15为内核异常,16以上的为外部中断,这个表就是中断向量表 ...