The 28th Annual Conference of the Japanese Society for Artificial Intelligence, 2014
- 1 -
ニ
ン付
ン
操作可能
Web
動画化
応用
Converting an Animated Presentation Slide to a Web Video and Its Application
丹羽
佑輔
*1白松
俊
*2大囿
忠親
*2新谷
虎松
*2Yusuke NIWA Shun SHIRAMATSU Tadachika OZONO Toramatsu SHINTANI
*1
名古屋工業大学大学院 工学研究
創成
ン工学専攻
*2
名古屋工業大学大学院 工学研究
情報工学専攻
Dept. of Scientific and Engineering Simulation，Graduate School of Engineering Nagoya Institute of Technology Dept. of Computer Science and Engineering，Graduate School of Engineering Nagoya Institute of Technology
We realized a web presentation system enables to display and manipulate presentation slides on web browsers. For realizing to transit among slides including animations and effects on web browsers, we implemented a system to convert presentation slides to videos that have each slide as chapters. The system provides a presentation environment using web browsers supporting HTML5 without any additional plugins. Furthermore, the system enables to create thumbnails of the starts of each slide and animation from the chapter information. The web content slide is applicable to signage contents and HTML snippets that is able to be embedded into web pages.
1.
じめに
既 ン を Web 上 表示/操作可能
Web ン ン を実現 ．ここ ，
ニ ンを含 ン 上 視覚効果を再現 ，
Web 上 毎 移動を実現 ， ン
を 情報付 動画 ( 降， ン動
画 ぶ) 変換 を実装 ．PowerPoint 作成
ニ ン付 ン ン資料を Web
上 表示 こ を可能 ．こ ，既 HTML5 対
応 Web を利用 ， ンを必要 効果的
ン 可能 ． ， 情報を用い こ ，
動画中 び ニ ン開始時 ネ を生
成 こ 可能 あ ， ネ 利用 画像
を用意 必要 い．応用 ，Web コン ン 化
をHTML ニ 既 Web 貼 こ
こ 可能 あ ，迅速 情報発信 可能 ， ，Web
ネ 魅力的 コン ン 再利用可能 あ ．
2.
プ ゼンスライ
Web
動画化
ン を ン動画 変換 [1]
い 明 ．本 を用い こ ， ニ ン付
ン をWeb 上 閲覧 こ 可能
． ン ン PowerPoint ン ン を対象 ．本 ，PowerPoint ン
開発 ．PowerPoint ン ，PowerPoint UI 統 合 こ ． ， ，PowerPoint UI
ン動画化 を実行 こ ，OS
ニ 上 起動 手間を
省くこ ．本 ，PowerPoint Object Library
( 降，PPOL ぶ．)を用い ，PowerPoint 機能を利用 ．
，PPOL ，PowerPoint ン ン をオ
供 ． び出 元 ，こ オ
を使用 ， ン ン 含
い や ニ ン 情報を 得 ．今回 ，
PPOL ン15.0を使用 ．本 ン ，PowerPoint
機能を用い ン ン を mp4形式
変換 ． ン ン オ
を使用 ， 画面切 換え ニ ン， び
時 再生開始さ ニ ン 情報を 得 ．こ
情報を mp4動画 情報 埋 込 こ
ン動画を作成 ． 情報 ，動画中 あ 時刻
， ニ ン 対応 い を表 情報
あ ．Web 上 再生 際 ， 情報を用
い ， JavaScript 動画 再生 停止 再生 制御を行
うこ ，Web 上 操作 可能 ．
3.
プ ゼン動画
サムネイ 生成と表示
Web 上 を閲覧 際， ン 様
， ネ 一覧 表示 ， ネ 選択 ，
移動 可能 あ 便利 あ ．Web 上
ン動画 ，各 び ニ ン 開始 時点
ネ 一覧を表示 方法 い 明 ． ン
動画 含 情報を用い ， ニ
ン 開始時刻を 得 ． 時刻 動画 再生位
置を ， 時刻 オ映像を静止画 記録
こ ， ネ を生成 ．実装環境 ，HTML5 あ ．
連絡先：丹羽佑輔，名古屋工業大学大学院工学研究 創成
ン工学専攻，[email protected]
1J3-3
The 28th Annual Conference of the Japanese Society for Artificial Intelligence, 2014
- 2 -
図3. HTML ニ 生成 図2. WEB PLAY 資料共有
function getThumbnails(video, timings, callback, ctx) { if (ctx == null) {
ctx.i = 0; ctx.thumbnails = [];
ctx.seeked = function() {
video.removeEventListener('seeked', ctx.seeked); var thumbnail = document.createElement('canvas');
thumbnail.width = video.videoWidth; thumbnail.height = video.videoHeight;
thumbnail.getContext('2d').drawImage(video, 0, 0); ctx.thumbnails[ctx.i] = thumbnail;
ctx.i += 1;
getThumbnails(video, timings, callback, ctx); };
return getThumbnails(video, timings, callback, ctx);
} else if (ctx.i >= timings.length) { return callback(ctx.thumbnails); }
video.currentTime = timings[ctx.i];
video.addEventListener('seeked', ctx.seeked); }
1. WEB PLAY 資料共有
video 要素を用い 動画 再生を行い，JavaScript を用い 動
画 処理を行う． canvas 要素を用い ，video 要素
画さ 動画 画像を複写 ， ネ を作成 ．実際 ，
Web 上 ン動画 生成 ネ 一覧 例を図 1 示 ． ネ 生成 関数 getThumbnails JavaScriptを 1 示 ．引数 video ン動画
込 video要素，timings 情報 時刻 配 列，callback ネ 作成処理 完了 場合 び出
関数を， 指定 ．ctx 関数 再帰 び出 利
用 一時変数 あ ．初回 関数 び出 ctxを省略
．関数 処理 流 い 明 ．初回 び出 ，
ctx 生成さ ．ctx ，現在 得を試 い
ン を示 変数 i，複写 ネ を保
配列thumbnails，video要素 完了時 び出 関数
seeked 構成さ ．ctx 在 場合 ，
ネ を複写 完了 う を確 ，ctx.i 値 配列timings 要素個数 上 あ を確認 ．
ネ 複写 完了 場合 ，複写 ネ を引
数 関数 callback を び出 ． う い場合 ，配列
timings ctx.i 示 要素 時刻 ．動画 ，currentTime 値を設定 こ 行う． ネ
得後，各 ネ click ン ， ネ
対応 動画中 時刻 動画を さ を記述 ．
こ ， ネ ン動画 表示
切 替えを可能 ． ネ 生成時間 ， ン動
画 動画 長さ 115.55 ， 数 24 場合，
0.56 完了 ．実行環境 ，CPU Core i7-4850HQ 2.3
GHz， 16.0 GB， Google Chrome ン
33.0， あ ．
4.
資料
共有と
HTML
スニペッ によ 配信
図2 示 WEB PLAY ， 上 動作ン あ ，Web動画化 資料 を け付け
．Web ン 対 ，資料 閲覧，HTML ニ
作成機能を 供 ． 時 付け 文 列
，資料 検索を行うこ 可能 あ ．Web 動画化
ン 再生 ，HTML5 記述 を
び出 行う．WEB PLAY 共有 ン動画 ，
WEB PLAY上 HTML ニ を生成 ，既 Web
貼 付け こ 可能 あ ．図3 ，WEB PLAY
ン動画 HTML ニ 作成 あ ．こ
， ン動画 表示 ，自動再生，
再生，自動再生時 送 間隔を設定 ，設定内容
応 HTML ニ を生成 ．
5.
おわ に
本研究 ，Web ン ン 開発を行
．本研究 ，PowerPoint ン ン を対象
， ニ ンを含 ン ン を動画化
を開発 ．既 PowerPoint ン を， Web 上 閲 覧 形 式 変 換
PowerPoint ンを開発 ．本 ンを用い こ ， ニ
ン付 ン を，特別 ンを入
こ くWeb 上 再生 こ を可能 ． ，
情報を用い こ ，動画中 び ニ
ン開始時 ネ を生成 こ 可能 あ ， ネ
利用 画像 を用意 必要 い
利点 あ ．
参考文献
[1] 丹羽佑輔, 白松俊, 大囿忠親, 新谷虎松, "既
ン用 操作情報付 動画変換 基 く Web コン
