Adobe Flash Steve Jobs 2010 ios Flash http://www.apple.com/ hotnews/thoughts-on-flash/ ios Flash ios HTML5 NimbleKit ipad HTML5 HTML5 NimbleKit Objective-C iphone ipod touch HTML5 ipad iphone ipod touch embedded HTML5 ios YouTube ipad HTML5 HTML5 video MPEG-4.m4v HTML <video src="name.m4v" width="x" height="y" poster="name.jpg" controls></video> 8-2
ipad HTML5 src Add to Project Xcode HTML object width height poster JPG PNG controls video ipad iosapps.tumblr.com http://en.wikipedia.org/wiki/piano <p>the piano is a musical instrument played by means of a keyboard. It is widely known as one of the most popular instruments in the world. Widely used in classical music for solo performances, ensemble use, chamber music, and accompaniment, the piano is also very popular as an aid to composing and rehearsal. Although not portable and often expensive, the piano s versatility and ubiquity have made it one of the world s most familiar musical instruments. </p> 8-3
<p>pressing a key on the piano s keyboard causes a felt-covered... <p>the word piano is a shortened form of the word pianoforte......speed with which the hammers hit the strings.</p> 8.1 QuickTime clip.m4v 8.1 Mac QuickTime clip.m4v ipad NimbleKit-based Xcode main.html HTML HTML NKNavigationController video NOTE NimbleKit NKIsPageSupportAutoOrientation JavaScript ipad ipad ipad 8-4
ipad HTML5 <html> <head> <meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" /> <script type="text/javascript" src="nkit.js"></script> <script type="text/javascript"> var navcontroller = new NKNavigationController(); navcontroller.settitle("ipad Video Example"); navcontroller.settintcolor(0, 102, 255); function NKIsPageSupportsAutoOrientation() { return "yes"; </script> </head> <body> <h1>the Piano</h1> <video src="clip.m4v" width="320" height="240" controls> </video> <p>the piano is a musical instrument played by means of a keyboard. It is widely known as one of the most popular instruments in the world. Widely used in classical music for solo performances, ensemble use, chamber music, and accompaniment, the piano is also very popular as an aid to composing and rehearsal. Although not portable and often expensive, the piano s versatility and ubiquity have made it one of the world s most familiar musical instruments. </p> 8-5
...two more paragraphs of text here... <p><em>source http://en.wikipedia.org/wiki/piano </em></p> </body> </html> 8.2 8.2 ipad 8.3 HTML photo.jpg 8.3 photo.jpg 320 240 8-6
ipad HTML5 video <video src="clip.m4v" width="320" height="240" poster="photo.jpg" controls></video> ios 8.4 CSS video. css main.html <link href="video.css" rel="stylesheet" type="text/css"> video video { display: block; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 30px; -webkit-box-shadow: 10px 10px 10px #888; box-shadow: 10px 10px 10px #888; padding: 15px; border: 1px solid #ccc; 8-7
block ipad CSS3 box-shadow -webkit- border margin padding HTML5 CSS3 NOTE CSS CSS forward-compatibility Apple -webkit-box-shadow box-shadow CSS h1 Zapfino body { background-color: #fff; margin: 20px; padding: 0px; font-family: Helvetica; h1 { margin-top: 50px; margin-bottom: 10px; padding: 0px; 8-8
ipad HTML5 font-size: 3em; line-height: 2em; text-align: center; 8.4 8.4 ipad HTML5 8.5 8.5 ipad HTML5 8-9
ipad HTML5 video iphone ipod touch ios ipad NKVideoPlayer NimbleKit NKVideoPlayer HTML5 video embedded play mode NKVideoPlayer ios Xcode 8.6 iphone/ipad ipad iphone ipod touch 8.6 ipad iphone ipod touch 8-10
NKVideoPlayer Xcode main.html JavaScript <script type="text/javascript"> var navcontroller = new NKNavigationController(); navcontroller.settitle("iphone Video Example"); navcontroller.settintcolor(0, 102, 255); var videoplayer = new NKVideoPlayer(); videoplayer.openfilename("clip.m4v"); function NKIsPageSupportsAutoOrientation() { return "yes"; </script> NKNavigationController NKIsPageSupportsAutoOrientation videoplayer NKVideoPlayer clip.m4v NKVideoPlayer clip.m4v ios 6 CSS main. html HTML <ul class="button"> <li><a href="#" onclick="videoplayer.play()">play video</a></li> </ul> 8-11
CSS.button { font-size: 14pt; display: inline; ul.button { list-style-type: none; ul.button li a { color: #fff; background-color: #06f; width: 220px; text-align: center; padding: 8px 0px 0px 0px; height: 32px; border: 1px solid #666; display: block; -webkit-border-radius: 10px; border-radius: 10px; text-shadow: 0px 1px 0px #ccc; text-decoration: none; margin-top: 20px; margin-right: auto; margin-left: auto; HTML5 <h1>the Piano</h1> <img src="photo.png" width="100%" /> 8-12