20120628_openend_ebookpro_mediverse_epub3_audio_video_emb_fixed_layout_ver2

EPUB3技術解説セミナー2
ビデオ・オーディオ／固定レイアウト

2012年6月28日（木）15:00-16:40

境祐司
@commonstyle ¦ 電子書籍メディア論

proﬁle

YOUJI SAKAI
Instructional Designer | eBook Designer
境祐司

BOOKS
最新刊

ウェブレイアウトの EPUB3スタンダード Webデザイン基礎
教科書デザインガイド改訂３版

community

電子書籍メデア論
ィ
http://www.facebook.com/eBookStrategy

デザインの未来
http://www.facebook.com/TheFutureDesign


本日のテーマ：

ビデオオーディオ
・
固定レイアウト


ビデオオーディオ
・
EPUB3 Video, Audio


EPUB3の仕様書を確認します


EPUB 3 ¦ International Digital Publishing Forum
http://idpf.org/epub/30


コンテンツドキュメントの仕様を確認します
EPUB Content Documents 3.0


EPUB Content Documents 3.0
http://idpf.org/epub/30/spec/epub30-contentdocs.html


1.2.1 Relationship to HTML5
http://idpf.org/epub/30/spec/epub30-contentdocs.html#sec-overview-relations-html


HTML5の仕様書を確認します


HTML5
http://www.w3.org/TR/html5/


video要素の仕様について確認します


4.8.6 The video element
http://www.w3.org/TR/html5/the-video-element.html#the-video-element


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


audio要素の仕様について確認します


4.8.7 The audio element
http://www.w3.org/TR/html5/the-audio-element.html#the-audio-element


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


パッケージドキュメントの仕様を確認します
EPUB Publications 3.0


EPUB Publications 3.0
http://idpf.org/epub/30/spec/epub30-publications.html


ビデオのメディアタイプを確認します


5.1 Core Media Types
http://idpf.org/epub/30/spec/epub30-publications.html#sec-core-media-types



Audio Type


ビデオのメディアタイプはありません



NOTE
This speciﬁcation does not deﬁne 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.

この仕様はビデオコーデックを定義していません



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 ビデオコーデックの少なくとも一つを
サポートすることが望ましい
※適合要件ではありません


H.264
VP8


なぜ、ビデオは定義されなかったのか？


ウェブで「ビデオ」といえば、
Flash Video


すべてのブラウザに対応

IE Firefox Chrome Safari Opera


HTML5 Videoは？



HTML5版のYouTubeで試してみよう


HTML5版のYouTube


Flash版YouTubeの場合、以下のURLで切り替える

http://www.youtube.com/html5



Safari


動画タグ
h.264
WebM



Chrome



Firefox


ブラウザによってサポートしている
ビデオフォーマットが異なる！


ブラウザについて確認しておこう


Browser



Browser
rendering engine

Trident Gecko WebKit WebKit Presto


HTML5 ビデオのサポートは？


MPEG-4 9.0+ - - 3.0+ -

Ogg - 3.5+ 5.0+ - 10.50+

WebM 9.0+ 4.0+ 6.0+ - 10.60+
VP8コーデック必要


iOS Android

MPEG-4 3.0+ 2.0+

Ogg - -

WebM - -


この状況では、EPUB3の仕様で
定義できない！


ビデオファイル



Video
Container



Metadata

Video codec

Audio codec


ビデオコンテナ

MEPG-4 AVI FLV
.mp4 .m4v .avi .flv

Ogg WebM
.ogv .webm



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



MPEG-4 Ogg WebM
.mp4 .m4v .ogv .webm


（メタデータ）


MPEG-4 Ogg WebM


（メタデータ＋ビデオコーデック）

H.264 Theora VP8

MPEG-4 Ogg WebM


（メタデータ＋ビデオコーデック＋オーディオコーデック）

H.264 Theora VP8
AAC Vorbis Vorbis

MPEG-4 Ogg WebM


Theora セオラ

http://theora.org/


Vorbis ボルビス

http://www.vorbis.com/


WebM ウェブエム

http://www.webmproject.org/


AAC Advanced Audio Coding

http://www.audiocoding.com/


EPUB3ではどのフォーマットを
使用すればよい？


iBooks
http://itunes.apple.com/jp/app/ibooks/id364709193?mt=8


iBooks
http://itunes.apple.com/jp/app/ibooks/id364709193?mt=8

商用目的の場合


Readium
http://readium.org/


ビデオ埋め込みの電子書籍
EPUB3 Enhanced eBook


公開されているEPUB3の
サンプルを検証してみよう


epub-samples
http://code.google.com/p/epub-samples/downloads/list


cc-shared-culture-20120130.epub
Creative Commons A Shared Culture with various permutations of video, audio (see TOC for details)


Readium（Chrome）で確認


shared-culture.mp4


Firefoxで確認


shared-culture.webm


Operaで確認


iPadのiBooks
（iOS5）で確認


iPad


サンプルファイルを検証


MPEG-4とWebMの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>
</code></pre>
</div>

</video>


iBooksとDL Reader
Kinoppyで比較


iPad
ビデオが再生される


DL Reader
代替情報が表示される


Kinoppy
何も表示されない


iPad DL Reader



<div class="errmsg">
<p>Your Reading System does not support (this) video.</p>
<pre><code>
</video>
</code></pre>
</div>
代替情報
</video>


iPad DL Reader

代替情報


その他のリーディングシステムは？


Adobe Digital Editions 1.8


Androidの環境では？


OverDrive
表示されない


Kinoppy
表示されない


ASTRI-Bee
ビデオは表示されるが
再生しない


Moon+ Reader Pro


FBReader


Aldiko


Himawari Reader Pro


Himawari Reader Pro
外部の動画プレーヤーが起動して再生される

著作権保護機能でスクリーンショットは撮れないが、
問題なく再生されている


Android環境では今のところ
ビデオ埋め込み電子書籍は難しい
EPUB3


ビデオ埋め込み電子書籍の
対象リーディングシステムは？


ビデオ埋め込みの電子書籍
EPUB3 Enhanced eBook

パッケージドキュメントに追加する


package.opf


package.opf

<manifest>

<item id="video1" href="video.mp4"

media-type="video/mp4"/>

<item id="video2" href="video.webm"

media-type="video/webm"/>

</manifest>


ビデオの変換方法


Miro Video Converter
http://www.mirovideoconverter.com/


補足：ビデオに字幕を表示する
track 要素


LeanBack Player ¦ HTML5 <track> element for subtitles example
http://leanbackplayer.com/example_subtitles.html


LeanBack Player ¦ HTML5 <track> element for subtitles example
http://leanbackplayer.com/example_subtitles.html

再生中に字幕を切り替えられる

日本語中国語


EPUB3のファイルで確認


VTTファイル

英語フランス語


VTTファイルの指定


Readium
まだ対応していない


Chromeには先行実装されている

chrome://ﬂags/


Chromeには先行実装されている

<track>要素を有効にする


HTML5のTRACK要素の基礎
http://www.html5rocks.com/ja/tutorials/track/basics/


HTML5のTRACK要素の基礎
http://www.html5rocks.com/ja/tutorials/track/basics/

字幕が表示されている


字幕付きビデオを組み込んだ電子書籍

・教育分野（語学など）
・インタビュー、対談
・多国語の絵本

・音声がなくても情報が伝わる
・ビデオ（映像）も検索対象にできる


質疑応答の時間


iBookstoreからビデオ付き電子書籍を
ダウンロードしてみよう


iBooks


これってEPUB? PDF？


EPUBです。
絶対配置の固定レイアウト
で作られています。


固定レイアウト
Fixed-Layout


Fixed-Layout
テキストや図版を画像化した
絶対配置紙面を配置


テキストや図版を絶対配置

・座標値を指定してテキストや図版を配置する方法
・文字サイズは固定されているものが多い
リーディングシステム側で文字サイズの変更ができない
・電子書籍のデータサイズは、
リフロー形式の電子書籍とあまり変わらない
・テキストの選択や本文検索などは実行できる


iPad at Work
Volume 2
Apple iBookstore


画像化した紙面を配置

・DTPデータからイメージ変換する方法
・もしくは、印刷物を取り込み、補正する方法
・コミックや写真集、絵本などは、JPEG、PNGなどの
ラスターグラフィックスが多い
・雑誌や凝ったレイアウトの実用書などは、PDFが多い
・リフロー形式やテキストや図版を絶対配置する方式と
比較した場合、データサイズが大きくなってしまう


There Was an Old Monkey Who Swallowed a Frog
Amazon Kindle Store
固定レイアウト（Kindle Format 8）


Country's Best Cabins
Amazon Kindle Store

プリントレプリカ


固定レイアウトの検証環境


about:flags


CSS領域を有効にする
「有効にする」をクリック


Readium


Himawari Reader Pro Android
https://play.google.com/store/apps/details?id=jp.green_ﬂd.himawari.pro


Readium mobile
Chorme for Android 4.0
http://github.readium.org/


公開されているEPUB3固定レイアウトのサンプル

epub-samples
http://code.google.com/p/epub-samples/

ダウンロードリスト
http://code.google.com/p/epub-samples/downloads/list


EPUB 3 Fixed-Layout Documents

・IDPFの情報文書（Informational Document）
・IDPF EPUB working group が作成
・2012年3月13日、IDPF 理事会によって承認



対応付け

機能
領域



プロパティ Preﬁxマッピング

・rendition:layout
・rendition:orientation
コンテント
・rendition:spread
ディメンションズ
・page-spread-*


Prefixマッピング
Prefix Mapping

prefix属性で URI
http://www.idpf.org/vocab/rendition/# にマッピング

<package …
prefix="rendition: http://www.idpf.org/vocab/rendition/#">

</package>


コンテント・ディメンションズ
Content dimensions

meta要素のviewportで指定

<head>
<meta name="viewport" content="width=1200, height=600" />
</head>

<head>
<meta name="viewport" content="width=512, height=600" />
</head>


プロパティの定義
Property Deﬁnitions

・リフロー／ページ区切りの指定
・スクリーンの方向（縦・横）
・見開きの指定
・見開きの配置指定（左・右・中央）



・rendition:layout プロパティ
・rendition:orientation プロパティ
・rendition:spread プロパティ
・page-spread-* プロパティ


コンテント・ディメンションズ
Content dimensions

meta要素のviewportで指定

Prefixマッピング
Prefix Mapping

prefix属性で URI
http://www.idpf.org/vocab/rendition/# にマッピング



page-blanche-20120314.epub



解凍



パッケージドキュメント（.opf）




プロパティ Preﬁxマッピング

・rendition:layout
・rendition:orientation
コンテント
・rendition:spread
ディメンションズ
・page-spread-*



コンテンツキュメント（.xhtml）



6ページ目のXHTMLファイル


rendition:layout プロパティ

・reﬂowable（リフロー）
・pre-paginated（ページ区切り）


rendition:orientation プロパティ

・landscape（横方向）
・portrait（縦方向）
・auto（制限なし）


rendition:spread プロパティ

・none
・landscape（横方向のみ）
・portrait（縦方向のみ）
・both（横方向・縦方向）
・auto（制限なし）


Double Pages


例：
ランドスケープモード（横向き）にすると
見開きで表示される

ランドスケープモード（横向き）では、
見開きではなく、シングルページの
拡大表示で読みたい、という読者もいる


読者が、シングルページ、
ダブルページ（見開き）を自由に選択
できたほうがよい場合もある


page-spread-* プロパティ

・page-spread-left プロパティ
（左側に配置）
・page-spread-right プロパティ
（右側に配置）
・rendition:page-spread-center
（中央に配置）



<itemref id="titlepage"
properties="page-spread-right
rendition:layout-pre-paginated"/>

タイトルページは右側に配置する




spine itemref要素でこのように指定してもよい


補足

<meta property="rendition:layout">
pre-paginated
</meta>



Appendix A. Examples
http://idpf.org/epub/fxl/#examples


Example 1

・固定レイアウト
・横向きでは合成された見開き
・縦向きでは見開きにしない


Example 1


Example 2

・合成された見開きにしない
・横向きで固定


Example 2


Example 3

・リフローのコンテンツ
・タイトルページだけ固定レイアウト
・合成された見開きを表示するときは
右側に配置


Example 3


Example 5

・リフローのコンテンツ
・固定レイアウトの
右配置ページと左配置ページを
合成された見開きページとして表示
・リフローのページも見開き表示のまま


Example 5


Example 7

・横向きでは合成された見開き
・縦向きでは見開きにしない
・進行方向は右から左（日本のマンガ）


Example 7

EPUB3の最新情報は
IDPFのサイトで確認してください

http://idpf.org/

Thank you for your attention.
ご清聴ありがとうございました

20120628_openend_ebookpro_mediverse_epub3_audio_video_emb_fixed_layout_ver2

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (12)

Destacado

Destacado (14)

Similar a 20120628_openend_ebookpro_mediverse_epub3_audio_video_emb_fixed_layout_ver2

Similar a 20120628_openend_ebookpro_mediverse_epub3_audio_video_emb_fixed_layout_ver2 (20)

Más de 一般社団法人メディア事業開発会議

Más de 一般社団法人メディア事業開発会議 (20)

Último

Último (9)

20120628_openend_ebookpro_mediverse_epub3_audio_video_emb_fixed_layout_ver2