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.区别

在较高版本的浏览器中，JS提供了globalStorage和sessionStorage，在H5中提供了localStorage来取代globalStorage。

则H5中web storage 包括两种存储方式：localStorage和sessionStorage两种。

①sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

②而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的，关闭浏览器也不会丢失。

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());
    }

}

运行结果

猜你喜欢