以下のように記述すると「ブラウザ幅」と「ディスプレイ解像度」によってレスポンシブに画像を入れ替わります
<picture>
<source srcset="img/600.png 1x , img/600@2x.png 2x" media="(min-width: 600px)" />
<source srcset="img/500.png 1x , img/500@2x.png 2x" media="(min-width: 500px)" />
<source srcset="img/400.png 1x , img/400@2x.png 2x" media="(min-width: 400px)" />
<source srcset="img/300.png 1x , img/300@2x.png 2x" media="(min-width: 300px)" />
<img src="img/default.png" alt="image with artdirection" />
</picture>
ポイントとしては大きい解像度の画像から指定することです。 小さい画像から指定するとうまく表示されません。
https://pgmemo.tokyo/livedemo/html5_source_srcset/test_img_source_srcset.html
picturefill を使用します。こちらを読み込ませるだけでOK。
<script src="//cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.min.js"></script>
https://pgmemo.tokyo/livedemo/html5_source_srcset/test_img_source_srcset_IE11.html
iPhoneやandroidなどスマホでフォーム入力時に 数字だけのキーボードを表示させるには
pattern を使用します。
例 :
<input type="text" pattern="\d*">
とします。
もちろん
<input type="number" pattern="\d*">
でもOKです。
<video id="videotest" width="640" height="480" controls="controls" preload="auto" poster="bg.png"
onabort="log('abort');"
oncanplay="log('canplay');"
oncanplaythrough="log('canplaythrough');"
ondurationchange="log('durationchange');"
onemptied="log('emptied');"
onended="log('ended');"
onerror="log('error');"
onloadeddata="log('loadeddata');"
onloadedmetadata="log('loadedmetadata');"
onloadstart="log('loadstart');"
onpause="log('pause');"
onplay="log('play');"
onplaying="log('playing');"
onprogress="log('progress');"
onratechange="log('ratechange');"
onreadystatechange="log('readystatechange');"
onseeked="log('seeked');"
onseeking="log('seeking');"
onstalled="log('stalled');"
onsuspend="log('suspend');"
ontimeupdate="log('timeupdate');"
onvolumechange="log('volumechange');"
onwaiting="log('waiting');">
<source id='videosource1' src="" type="video/mp4"/>
<source id='videosource2' src="" type="video/ogg" />
<source id='videosource3' src="" type="video/webm" />
</video>
var myVideo=document.getElementById("video1");
if (myVideo.paused) {
myVideo.play();
}
else {
myVideo.pause();
}
jqueryで次のように書くこともできます。
function is_video_playing()
{
var video_dom = $('div.myvideo')[0];
if (video_dom.paused) {
return false;
}
else {
return true;
}
}
残念ながらiOSの仕様上必ず画面を一度はクリックしないと再生はできなくなっています。
■ HTML5での追加タグは以下の通り
video section time rt ruby progress rp output nav menu meter mark legend keygen header footer figure dialog details datalist command canvas audio aside article
■ HTML5のサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<title>HTML 5</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="XXXXX.css" />
</head>
<body>
<header>
<h1>Header</h1>
<nav><ul>
<li><a href="#">home</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul></nav>
</header>
<section>
<ol id="posts-list" class="hfeed">
<li><article>
<header><h2><a href="#">article title 1</a></h2></header>
<footer>
<abbr title="2005-10-10T14:07:00-07:00">
8th October 2009
</abbr>
<address>By <a href="#">User 1</a></address>
</footer>
<div>contents contents contents contents contents contents contents contents contents </div>
</article></li>
<li><article>
<header><h2><a href="#">article title 1</a></h2></header>
<footer>
<abbr title="2005-10-10T14:07:00-07:00">
8th October 2009
</abbr>
<address>By <a href="#">User 1</a></address>
</footer>
<div>contents contents contents contents contents contents contents contents contents </div>
</article></li>
<li><article>
<header><h2><a href="#">article title 1</a></h2></header>
<footer>
<abbr title="2005-10-10T14:07:00-07:00">
8th October 2009
</abbr>
<address>By <a href="#">User 1</a></address>
</footer>
<div>contents contents contents contents contents contents contents contents contents </div>
</article></li>
</ol>
</section>
<section>
<h2>sub menu</h2>
<ul>
<li><a href="#" rel="external">menu 1</a></li>
<li><a href="#" rel="external">menu 2</a></li>
<li><a href="#" rel="external">menu 3</a></li>
<li><a href="#" rel="external">menu 4</a></li>
<li><a href="#" rel="external">menu 5</a></li>
</ul>
</section>
<footer>
<address>Copyright © XXXXX All Rights Reserved.</address>
</footer>
</body>
</html>
http://granshe.blog.shinobi.jp/Entry/118/
http://www.scratchbrain.net/blog/ver2/entries/001552.html
http://dwlog.net/2009/08/html5-in-dreamweaver.html
iPhoneのSafari対応について - プログラミングノート
http://d.hatena.ne.jp/ntaku/20090913/1252827348