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 ...
随机推荐
- JVM垃圾收集器-G1收集器
G1收集器是当前收集器技术发展的最前沿成果,在JDK1.6_Updata14中提供了Early Access版本的G1收集器以供适用.G1收集器是垃圾收集器理论进一步发展的产物,它与前面的CMS收集器 ...
- JVM垃圾收集器-Serial收集器
今天我给大家分享的是Serial收集器,垃圾收集器就是内存回收的具体实现.Java虚拟机规范中对垃圾收集器应该如何实现并没有任何规定,因此不同的厂商,不同的版本的虚拟机所提供的垃圾收集器都可能会有很大 ...
- Ubuntu16.04中如何启用floodlight的一种方式
在 floodlight文件夹下输入 java -jar target/floodlight.jar 启动floodlight控制器,在浏览器窗口输入 http://localhost:8080/ui ...
- 爬虫模块介绍--Beautifulsoup （解析库模块，正则）
Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup会帮你节省数小时 ...
- 数据库关闭，shutdown三种语句。
1.shutdown normal 正常方式关闭数据库. 2.shutdown immediate 立即方式关闭数据库. 在SVRMGRL中执行shutdown immedia ...
- Linux第八节课学习笔记
su命令可以切换用户身份,一般不用,而是用sudo. visudo命令中可执行命令列表不用ALL,我们可以先使用whereis命令找出命令所对应的保存路径,然后把配置文件第99行的用户权限参数修改成对 ...
- linux子系统ubuntu16.04安装使用xrdp当远程桌面
参考文献:https://icytown.com/windows/windows-subsystem-for-linux-gui-xubuntu/ https://jingyan.baidu.com/ ...
- sqlite 使用 cte 及 递归的实现示例
1.多级 cte 查询示例. with cte as ( select pageid from cm_bookpage ) , cte2 as ( as content from cte ) sele ...
- MySQL Hardware--CentOS 6查看CPU信息
查看CPU信息 cpu_model=`cat /proc/cpuinfo |grep "model name"|awk -F ':' '{print $2}' |uniq` cpu ...
- R并行计算
# 参考文献: https://cosx.org/2016/09/r-and-parallel-computinghttps://blog.csdn.net/sinat_26917383/articl ...