いろいろ探してみました
javascriptで動的にhtml5に変換するものがありました
https://pptx.js.org/index.html
動的に変換します
音、ビデオ、テキスト、リンク、画像、図形。インクをサポートしています
ほとんどすべてです。再現性がとてもいいです
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PPTXjs - Meshesha</title>
<link rel="stylesheet" href="./css/pptxjs.css">
<link rel="stylesheet" href="./css/nv.d3.min.css">
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/jszip.min.js"></script>
<script type="text/javascript" src="./js/filereader.js"></script>
<script type="text/javascript" src="./js/d3.min.js"></script>
<script type="text/javascript" src="./js/nv.d3.min.js"></script>
<script type="text/javascript" src="./js/pptxjs.js"></script>
<script type="text/javascript" src="./js/divs2slides.js"></script>
<script type="text/javascript" src="./js/jquery.fullscreen-min.js"></script>
<style>
html, body { margin: 0; padding: 0; }
#warper { margin-right: auto; margin-left: auto; width: 800px; }
</style>
</head>
<body>
<div id="slide-resolte-contaniner" ></div>
<script>
$("#slide-resolte-contaniner").pptxToHtml({
pptxFileUrl: "Sample.pptx",
slideMode: true,
slidesScale: "100%",
keyBoardShortCut: true,
mediaProcess: true, /** true,false: if true then process video and audio files */
slideModeConfig: { //on slide mode (slideMode: true)
first: 1,
nav: true, /** true,false : show or not nav buttons*/
navTxtColor: "white", /** color */
showPlayPauseBtn: true,/** true,false */
showSlideNum: true, /** true,false */
showTotalSlideNum: true, /** true,false */
autoSlide: 2, /** false or seconds (the pause time between slides) , F8 to active(keyBoardShortCut: true) */
randomAutoSlide: false, /** true,false ,autoSlide:true */
loop: false, /** true,false */
background: "black", /** false or color*/
transition: "slid", /** transition type: "slid","fade","default","random" , to show transition efects :transitionTime > 0.5 */
transitionTime: 1 /** transition time in seconds */
}
});
</script>
</body>
</html>
設定オプション:
| # | 名前 | 説明 | デフォルト値 |
|---|---|---|---|
| 1 | スライドスケール | スライドのスケールをパーセント(%)で変更します。元のサイズの場合は、このオプションを "" または "100%" に設定します。 | 「」 |
| 2 | スライドモード | true の場合、プレゼンテーション モードをオンにします。プレゼンテーション モードの設定は、変数 "slideModeConfig" によって制御されます。 | 間違い |
| 3 | キーボードショートカット | true の場合、キーボード ショートカット F5 でプレゼンテーション モードを開始または終了できるようになります。 | 間違い |
| 4 | メディアプロセス | true の場合、ビデオおよびオーディオ ファイルを処理します。false の場合、プレゼンテーションに埋め込まれたビデオおよびオーディオを再生したり、視聴したりすることはできません。 | 真実 |
| 5 | jsZipV2 | jsZip バージョン 2 への URL リンク。 これにより、jsZip v.3 が別の用途でロードされた場合に、jsZip v.2 をロードできるようになります。 |
間違い |
| 6 | スライドモード設定 | プレゼンテーションモードの設定。 詳細についてはここをクリックしてください |
{} |
| 7 | スライドモード設定.first | 読み込まれる最初のスライド。 | 1 |
| 8 | スライドモード設定.nav | ナビゲーター ボタンを表示 ('true') または非表示 ('false') にします。 | 真実 |
| 9 | スライドモード設定.navTxtColor | ナビゲータ領域に表示されるスライド番号テキストの色とスライドの合計数。 | "黒" |
| 10 | スライドモード設定.キーボードショートカット | true の場合、キーボードショートカットでプレゼンテーションを制御できるようになります。 キーボードショートカットのリストについては、ここをクリックしてください。 |
間違い |
| 11 | slideModeConfig.showSlideNum | true の場合、ナビゲータ領域にスライド番号が表示されます。 | 真実 |
| 12 | slideModeConfig.showTotalSlideNum | true の場合、ナビゲータ領域にスライドの合計数が表示されます。 | 真実 |
| 13 | slideModeConfig.autoSlide | オプション: 'false' または数値 (秒)。'false' に設定すると、自動スライド モードが無効になります。数値を設定すると、自動スライド モードが有効になり、数値がスライド間の時間になります。 | 1 |
| 14 | slideModeConfig.randomAutoSlide | true かつ autoSlide モードが有効になっている場合、スライドはランダムな順序で表示されます。 | 間違い |
| 15 | スライドモード設定ループ | true の場合、プレゼンテーション モードで最後のスライドの後に最初のスライドに移動します。自動スライド モードでは、プレゼンテーションはループで再生されます。 | 間違い |
| 16 | スライドモード設定.背景 | プレゼンテーションの背景の色。 | 間違い |
| 17 | スライドモード設定.トランジション | 遷移タイプのオプション: 「スライド」、「フェード」、「デフォルト」、「ランダム」。 | "デフォルト" |
| 18 | スライドモード設定.遷移時間 | スライド間の時間遅延（秒単位）。 | 1 |