More Related Content Similar to 20120628_openend_ebookpro_mediverse_epub3_audio_video_emb_fixed_layout_ver2 Similar to 20120628_openend_ebookpro_mediverse_epub3_audio_video_emb_fixed_layout_ver2 (20) More from 一般社団法人メディア事業開発会議 More from 一般社団法人メディア事業開発会議 (20) 20120628_openend_ebookpro_mediverse_epub3_audio_video_emb_fixed_layout_ver22. profile
YOUJI SAKAI
Instructional Designer | eBook Designer
境祐司
3. BOOKS
最新刊
ウェブレイアウトの EPUB3スタンダード Webデザイン基礎
教科書 デザインガイド 改訂3版
4. community
電子書籍メデ ア論
ィ
http://www.facebook.com/eBookStrategy
デザインの未来
http://www.facebook.com/TheFutureDesign
12. EPUB3技術解説セミナー2
1.2.1 Relationship to HTML5
http://idpf.org/epub/30/spec/epub30-contentdocs.html#sec-overview-relations-html
13. EPUB3技術解説セミナー2
1.2.1 Relationship to HTML5
http://idpf.org/epub/30/spec/epub30-contentdocs.html#sec-overview-relations-html
17. EPUB3技術解説セミナー2
4.8.6 The video element
http://www.w3.org/TR/html5/the-video-element.html#the-video-element
18. EPUB3技術解説セミナー2
4.8.6 The video element
http://www.w3.org/TR/html5/the-video-element.html#the-video-element
src
crossorigin
poster
preload
autoplay
mediagroup
loop
muted
controls
width
height
20. EPUB3技術解説セミナー2
4.8.7 The audio element
http://www.w3.org/TR/html5/the-audio-element.html#the-audio-element
21. EPUB3技術解説セミナー2
4.8.7 The audio element
http://www.w3.org/TR/html5/the-audio-element.html#the-audio-element
src
crossorigin
preload
autoplay
mediagroup
loop
muted
controls
23. EPUB3技術解説セミナー2
EPUB Publications 3.0
http://idpf.org/epub/30/spec/epub30-publications.html
25. EPUB3技術解説セミナー2
5.1 Core Media Types
http://idpf.org/epub/30/spec/epub30-publications.html#sec-core-media-types
26. EPUB3技術解説セミナー2
5.1 Core Media Types
http://idpf.org/epub/30/spec/epub30-publications.html#sec-core-media-types
27. EPUB3技術解説セミナー2
5.1 Core Media Types
http://idpf.org/epub/30/spec/epub30-publications.html#sec-core-media-types
Audio Type
29. EPUB3技術解説セミナー2
5.1 Core Media Types
http://idpf.org/epub/30/spec/epub30-publications.html#sec-core-media-types
30. EPUB3技術解説セミナー2
5.1 Core Media Types
http://idpf.org/epub/30/spec/epub30-publications.html#sec-core-media-types
NOTE
This specification does not define any video codecs as Core
Media Types. Refer to the note in EPUB Publications ̶ Reading
System Conformance above for informative recommendations
on support for video codecs in EPUB Publications.
この仕様はビデオコーデックを定義していません
31. EPUB3技術解説セミナー2
5.1 Core Media Types
http://idpf.org/epub/30/spec/epub30-publications.html#sec-core-media-types
32. EPUB3技術解説セミナー2
5.1 Core Media Types
http://idpf.org/epub/30/spec/epub30-publications.html#sec-core-media-types
NOTE
It is recommended that Reading Systems support at least one of the [H.
264] and [VP8] video codecs, but this is not a conformance requirement; a
Reading System may support no video codecs at all. Content creators and
Reading System developers should take into consideration factors such as
breadth of adoption, video playback quality, and technology usage royalty
requirements when making a choice to include or implement video in either
(or potentially, both) formats.
H.264 と VP8 ビデオコーデックの少なくとも一つを
サポートすることが望ましい
※適合要件ではありません
54. EPUB3技術解説セミナー2
Browser
rendering engine
IE Firefox Chrome Safari Opera
Trident Gecko WebKit WebKit Presto
56. EPUB3技術解説セミナー2
MPEG-4 9.0+ - - 3.0+ -
Ogg - 3.5+ 5.0+ - 10.50+
WebM 9.0+ 4.0+ 6.0+ - 10.60+
VP8コーデック必要
57. EPUB3技術解説セミナー2
MPEG-4 9.0+ - - 3.0+ -
Ogg - 3.5+ 5.0+ - 10.50+
WebM 9.0+ 4.0+ 6.0+ - 10.60+
VP8コーデック必要
60. EPUB3技術解説セミナー2
5.1 Core Media Types
http://idpf.org/epub/30/spec/epub30-publications.html#sec-core-media-types
NOTE
It is recommended that Reading Systems support at least one of the [H.
264] and [VP8] video codecs, but this is not a conformance requirement; a
Reading System may support no video codecs at all. Content creators and
Reading System developers should take into consideration factors such as
breadth of adoption, video playback quality, and technology usage royalty
requirements when making a choice to include or implement video in either
(or potentially, both) formats.
H.264 と VP8 ビデオコーデックの少なくとも一つを
サポートすることが望ましい
※適合要件ではありません
65. EPUB3技術解説セミナー2
ビデオコンテナ
MEPG-4 AVI FLV
.mp4 .m4v .avi .flv
Ogg WebM
.ogv .webm
66. EPUB3技術解説セミナー2
ビデオコンテナ
Metadata Metadata Metadata
Video codec Video codec Video codec
Audio codec Audio codec Audio codec
Metadata Metadata
Video codec Video codec
Audio codec Audio codec
68. EPUB3技術解説セミナー2
ビデオコンテナ
(メタデータ)
Metadata Metadata Metadata
MPEG-4 Ogg WebM
.mp4 .m4v .ogv .webm
69. EPUB3技術解説セミナー2
ビデオコンテナ
(メタデータ + ビデオコーデック)
Metadata Metadata Metadata
H.264 Theora VP8
MPEG-4 Ogg WebM
.mp4 .m4v .ogv .webm
70. EPUB3技術解説セミナー2
ビデオコンテナ
(メタデータ + ビデオコーデック + オーディオコーデック)
Metadata Metadata Metadata
H.264 Theora VP8
AAC Vorbis Vorbis
MPEG-4 Ogg WebM
.mp4 .m4v .ogv .webm
74. EPUB3技術解説セミナー2
AAC Advanced Audio Coding
http://www.audiocoding.com/
76. EPUB3技術解説セミナー2
iBooks
http://itunes.apple.com/jp/app/ibooks/id364709193?mt=8
77. EPUB3技術解説セミナー2
iBooks
http://itunes.apple.com/jp/app/ibooks/id364709193?mt=8
商用目的の場合
78. EPUB3技術解説セミナー2
ビデオコンテナ
(メタデータ + ビデオコーデック + オーディオコーデック)
Metadata Metadata Metadata
H.264 Theora VP8
AAC Vorbis Vorbis
MPEG-4 Ogg WebM
.mp4 .m4v .ogv .webm
80. EPUB3技術解説セミナー2
ビデオコンテナ
(メタデータ + ビデオコーデック + オーディオコーデック)
Metadata Metadata Metadata
H.264 Theora VP8
AAC Vorbis Vorbis
MPEG-4 Ogg WebM
.mp4 .m4v .ogv .webm
83. EPUB3技術解説セミナー2
epub-samples
http://code.google.com/p/epub-samples/downloads/list
84. EPUB3技術解説セミナー2
cc-shared-culture-20120130.epub
Creative Commons A Shared Culture with various permutations of video, audio (see TOC for details)
90. EPUB3技術解説セミナー2
MPEG-4 9.0+ - - 3.0+ -
Ogg - 3.5+ 5.0+ - 10.50+
WebM 9.0+ 4.0+ 6.0+ - 10.60+
VP8コーデック必要
94. EPUB3技術解説セミナー2
MPEG-4 9.0+ - - 3.0+ -
Ogg - 3.5+ 5.0+ - 10.50+
WebM 9.0+ 4.0+ 6.0+ - 10.60+
VP8コーデック必要
98. EPUB3技術解説セミナー2
MPEG-4 9.0+ - - 3.0+ -
Ogg - 3.5+ 5.0+ - 10.50+
WebM 9.0+ 4.0+ 6.0+ - 10.60+
VP8コーデック必要
113. EPUB3技術解説セミナー2
<video id="video1" controls="controls">
<source src="../video/shared-culture.mp4" type="video/mp4"/>
<source src="../video/shared-culture.webm" type="video/webm"/>
<div class="errmsg">
<p>Your Reading System does not support (this) video.</p>
<pre><code>
<video id="video1" controls="controls">
<source src="../video/shared-culture.mp4" type="video/mp4"/>
<source src="../video/shared-culture.webm" type="video/webm"/>
</video>
</code></pre>
</div>
</video>
120. EPUB3技術解説セミナー2
<video id="video1" controls="controls">
<source src="../video/shared-culture.mp4" type="video/mp4"/>
<source src="../video/shared-culture.webm" type="video/webm"/>
<div class="errmsg">
<p>Your Reading System does not support (this) video.</p>
<pre><code>
<video id="video1" controls="controls">
<source src="../video/shared-culture.mp4" type="video/mp4"/>
<source src="../video/shared-culture.webm" type="video/webm"/>
</video>
</code></pre>
</div>
</video>
121. EPUB3技術解説セミナー2
<video id="video1" controls="controls">
<source src="../video/shared-culture.mp4" type="video/mp4"/>
<source src="../video/shared-culture.webm" type="video/webm"/>
<div class="errmsg">
<p>Your Reading System does not support (this) video.</p>
<pre><code>
<video id="video1" controls="controls">
<source src="../video/shared-culture.mp4" type="video/mp4"/>
<source src="../video/shared-culture.webm" type="video/webm"/>
</video>
</code></pre>
</div>
代替情報
</video>
134. EPUB3技術解説セミナー2
Himawari Reader Pro
外部の動画プレーヤーが起動して再生される
著作権保護機能でスクリーンショットは撮れないが、
問題なく再生されている
137. EPUB3技術解説セミナー2
iBooks
http://itunes.apple.com/jp/app/ibooks/id364709193?mt=8
143. EPUB3技術解説セミナー2
package.opf
<manifest>
<item id="video1" href="video.mp4"
media-type="video/mp4"/>
<item id="video2" href="video.webm"
media-type="video/webm"/>
</manifest>
162. EPUB3技術解説セミナー2
HTML5のTRACK要素の基礎
http://www.html5rocks.com/ja/tutorials/track/basics/
163. EPUB3技術解説セミナー2
HTML5のTRACK要素の基礎
http://www.html5rocks.com/ja/tutorials/track/basics/
164. EPUB3技術解説セミナー2
HTML5のTRACK要素の基礎
http://www.html5rocks.com/ja/tutorials/track/basics/
字幕が表示されている
178. EPUB3技術解説セミナー2
テキストや図版を絶対配置
・座標値を指定してテキストや図版を配置する方法
・文字サイズは固定されているものが多い
リーディングシステム側で文字サイズの変更ができない
・電子書籍のデータサイズは、
リフロー形式の電子書籍とあまり変わらない
・テキストの選択や本文検索などは実行できる
180. EPUB3技術解説セミナー2
画像化した紙面を配置
・DTPデータからイメージ変換する方法
・もしくは、印刷物を取り込み、補正する方法
・コミックや写真集、絵本などは、JPEG、PNGなどの
ラスターグラフィックスが多い
・雑誌や凝ったレイアウトの実用書などは、PDFが多い
・リフロー形式やテキストや図版を絶対配置する方式と
比較した場合、データサイズが大きくなってしまう
182. EPUB3技術解説セミナー2
画像化した紙面を配置
・DTPデータからイメージ変換する方法
・もしくは、印刷物を取り込み、補正する方法
・コミックや写真集、絵本などは、JPEG、PNGなどの
ラスターグラフィックスが多い
・雑誌や凝ったレイアウトの実用書などは、PDFが多い
・リフロー形式やテキストや図版を絶対配置する方式と
比較した場合、データサイズが大きくなってしまう
183. EPUB3技術解説セミナー2
Country's Best Cabins
Amazon Kindle Store
プリントレプリカ
192. EPUB3技術解説セミナー2
Himawari Reader Pro Android
https://play.google.com/store/apps/details?id=jp.green_fld.himawari.pro
193. EPUB3技術解説セミナー2
Himawari Reader Pro Android
https://play.google.com/store/apps/details?id=jp.green_fld.himawari.pro
196. EPUB3技術解説セミナー2
EPUB 3 Fixed-Layout Documents
・IDPFの情報文書(Informational Document)
・IDPF EPUB working group が作成
・2012年3月13日、IDPF 理事会によって承認
199. EPUB3技術解説セミナー2
Prefixマッピング
Prefix Mapping
prefix属性で URI
http://www.idpf.org/vocab/rendition/# にマッピング
<package …
prefix="rendition: http://www.idpf.org/vocab/rendition/#">
</package>
200. EPUB3技術解説セミナー2
コンテント・ディメンションズ
Content dimensions
meta要素のviewportで指定
<head>
<meta name="viewport" content="width=1200, height=600" />
</head>
<head>
<meta name="viewport" content="width=512, height=600" />
</head>
212. EPUB3技術解説セミナー2
page-blanche-20120314.epub
EPUB 3 Fixed-Layout Documents
プロパティ Prefixマッピング
・rendition:layout
・rendition:orientation
コンテント
・rendition:spread
ディメンションズ
・page-spread-*
215. EPUB3技術解説セミナー2
page-blanche-20120314.epub
EPUB 3 Fixed-Layout Documents
プロパティ Prefixマッピング
・rendition:layout
・rendition:orientation
コンテント
・rendition:spread
ディメンションズ
・page-spread-*
230. EPUB3技術解説セミナー2
page-spread-* プロパティ
<itemref id="titlepage"
properties="page-spread-right
rendition:layout-pre-paginated"/>
タイトルページは右側に配置する
231. EPUB3技術解説セミナー2
page-spread-* プロパティ
<itemref id="titlepage"
properties="page-spread-right
rendition:layout-pre-paginated"/>
spine itemref要素でこのように指定してもよい
232. EPUB3技術解説セミナー2
補足
<meta property="rendition:layout">
pre-paginated
</meta>
<itemref id="titlepage"
properties="page-spread-right
rendition:layout-pre-paginated"/>
238. EPUB3技術解説セミナー2
Example 3
・リフローのコンテンツ
・タイトルページだけ固定レイアウト
・合成された見開きを表示するときは
右側に配置
240. EPUB3技術解説セミナー2
Example 5
・リフローのコンテンツ
・固定レイアウトの
右配置ページと左配置ページを
合成された見開きページとして表示
・リフローのページも見開き表示のまま
242. EPUB3技術解説セミナー2
Example 7
・固定レイアウト
・横向きでは合成された見開き
・縦向きでは見開きにしない
・進行方向は右から左(日本のマンガ)
250. community
電子書籍メデ ア論
ィ
http://www.facebook.com/eBookStrategy
デザインの未来
http://www.facebook.com/TheFutureDesign