XP11067_內文.pdf

Size: px

Start display at page:

Download "XP11067_內文.pdf"

缝顷贲
7 years ago
Views:

1 Adobe Flash Steve Jobs 2010 ios Flash 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

NimbleKit Objective-C iphone ipod touch HTML5 ipad iphone ipod touch embedded HTML5 ios

2 ipad HTML5 src Add to Project Xcode HTML object width height poster JPG PNG controls video ipad iosapps.tumblr.com <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

Widely used in classical music for solo performances, ensemble use, chamber music, and accompaniment, the piano is also very popular as an aid to

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

.....speed with which the hammers hit the strings.</p> 8.1 QuickTime clip.m4v 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

settintcolor(0, 102, 255); function NKIsPageSupportsAutoOrientation() { return "yes"; </script> </head> <body> <h1>the Piano</h1> <video src="clip.

5 ...two more paragraphs of text here... <p><em>source </em></p> </body> </html> ipad 8.3 HTML photo.jpg 8.3 photo.jpg

org/wiki/piano </em></p> </body> </html> 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

css" rel="stylesheet" type="text/css"> video video { display: block; margin-right: auto; margin-left:

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

Zapfino body { background-color: #fff; margin: 20px; padding: 0px;

8 ipad HTML5 font-size: 3em; line-height: 2em; text-align: center; ipad HTML ipad HTML5 8-9

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

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

m4v"); function NKIsPageSupportsAutoOrientation() { return "yes"; </script> NKNavigationController NKIsPageSupportsAutoOrientation videoplayer

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

32px; border: 1px solid #666; display: block; -webkit-border-radius: 10px; border-radius: 10px; text-shadow: 0px 1px

css-03.pdf

css-03.pdf 3 71 7 2 r e d p u r p l e H1 {color: maroon;} H1 {color: gray;} H2 {color: silver;} H3 {color: black;} 7 3 H1 {color: orange;} H 1 o r a n g e 7 4 o r a n g e RGB rgb(100%,100%,100%) 7 5 0 % H1 {color: