#author("2020-01-08T21:42:37+09:00","","")
#author("2020-01-08T21:45:22+09:00","","")
** tinyvideo.inc.php [#a60ce812]
|RIGHT:100|LEFT:360|c
|~サマリ|動画再生(videoタグ出力)|
|~リビジョン|1.01|
|~対応バージョン|1.5.2|
|~投稿者|[[M.Taniguchi]]|
|~投稿日|&new{2020-01-08 (水) 18:02:37};|

**概要 [#x64a0414]
mp4などの動画ファイルを埋め込み再生するプラグイン。

HTML5のvideoタグを出力するが、すべての属性や複数source指定には対応していない簡易的なもの。

PukiWiki 1.5.2/PHP 7.3 で動作確認済み。


**使い方 [#v7b8ad74]

-#tinyvideo(動画ファイル名[,幅 高さ][,ポスター画像ファイル名][,controls][,loop][,muted][,autoplay])
-&tinyvideo(動画ファイル名[,幅 高さ][,ポスター画像ファイル名][,controls][,loop][,muted][,autoplay]);

~
''引数''

-動画ファイル名 … 再生する動画ファイル(拡張子 mp4,mov,ogg,webm 等)
-幅 高さ … 表示サイズ指定(単位:px)、指定なしなら幅100%・高さ自動
-ポスター画像ファイル名 … 再生前に表示したい画像ファイル(拡張子 jpg,jpeg,png,gif,webp)※1
-controls … 操作パネル表示 ※2
-loop … ループ再生
-muted … 音声ミュート
-autoplay … 自動再生 ※3

※1 ブラウザー/バージョンによっては再生前に何も表示されないことがあるため、ポスター画像の指定を推奨します。~
※2 ブラウザー内蔵の標準操作パネル。デザインはブラウザーにより異なります。~
※3 実際に自動再生されるかはブラウザーに依存します。特にスマートフォンでは条件が厳しく、常に不可だったり、mutedとの併用が必要になるなど。くわしくは「HTML5 videoタグ」等でググって情報収集してください。
※3 実際に自動再生されるかはブラウザーに依存します。特にスマートフォンでは条件が厳しく、常に不可だったり、mutedが必須になるなど。くわしくは「HTML5 videoタグ」等でググって情報収集してください。

~
''使用例''

 &tinyvideo(/videos/sample.mp4,controls);

 &tinyvideo(/videos/sample.mp4,/images/sample.jpg,controls,loop,muted,autoplay);

 &tinyvideo(/videos/sample.mp4,320 240,controls);

~
''CSS''

スキンCSSにおいて、次のセレクターで当プラグインが出力するvideoタグを指定することができます。

 .plugin-tinyvideo

**コード [#i2a8b5a4]

tinyvideo.inc.php~
(下記のコードをコピーして、plugin ディレクトリに tinyvideo.inc.php というファイル名で保存してください)

 <?php
 /*
 PukiWiki - Yet another WikiWikiWeb clone.
 tinyvideo.inc.php, v1.01 2020 M. Taniguchi
 License: GPL v3 or (at your option) any later version
 
 videoタグを出力するPukiWiki用プラグイン。
 videoタグの全ての属性や複数source指定には対応しない簡易的なもの。
 PukiWiki 1.5.2/PHP 7.3 で動作確認済み。
 
 【使い方】
 #tinyvideo(動画ファイル名[,幅 高さ][,ポスター画像ファイル名][,controls][,loop][,muted][,autoplay])
 &tinyvideo(動画ファイル名[,幅 高さ][,ポスター画像ファイル名][,controls][,loop][,muted][,autoplay]);
 
 【引数】
 動画ファイル名         … 再生する動画ファイル(拡張子 mp4,mov,ogg,webm 等)
 幅 高さ                … 表示サイズ指定(単位:px)、指定なしなら幅100%・高さ自動
 ポスター画像ファイル名 … 再生前に表示したい画像ファイル(拡張子 jpg,jpeg,png,gif,webp)※1
 controls               … 操作パネル表示 ※2
 loop                   … ループ再生
 muted                  … 音声ミュート
 autoplay               … 自動再生 ※3
 
 ※1 ブラウザー/バージョンによっては再生前に何も表示されないことがあるため、ポスター画像の指定を推奨します。
 ※2 ブラウザー内蔵の標準操作パネル。デザインはブラウザーにより異なります。
 ※3 実際に自動再生されるかはブラウザーに依存します。特にスマートフォンでは条件が厳しく、常に不可だったり、mutedとの併用が必要になるなど。くわしくは「HTML5 videoタグ」等でググって情報収集してください。
 ※3 実際に自動再生されるかはブラウザーに依存します。特にスマートフォンでは条件が厳しく、常に不可だったり、mutedが必須になるなど。くわしくは「HTML5 videoタグ」等でググって情報収集してください。
 
 【使用例】
 &tinyvideo(/videos/sample.mp4,controls);
 &tinyvideo(/videos/sample.mp4,/images/sample.jpg,controls,loop,muted,autoplay);
 &tinyvideo(/videos/sample.mp4,320 240,controls);
 
 【CSS】
 スキンCSSにおいて、次のセレクターで当プラグインが出力するvideoタグを指定することができます。
 
 .plugin-tinyvideo
 
 */
 
 function plugin_tinyvideo_convert() {
 	list($file, $args[0], $args[1], $args[2], $args[3], $args[4], $args[5]) = func_get_args();
 	return plugin_tinyvideo_makeVideoTag($file, $args);
 }
 
 function plugin_tinyvideo_inline() {
 	list($file, $args[0], $args[1], $args[2], $args[3], $args[4], $args[5]) = func_get_args();
 	return plugin_tinyvideo_makeVideoTag($file, $args);
 }
 
 function plugin_tinyvideo_makeVideoTag($file, $args) {
 	static $argNames = array('controls', 'loop', 'muted', 'autoplay');
 
 	$attr = ' playsinline';
 	$size = 'width="100%" height="auto"';
 	$poster = '';
 
 	foreach ($args as $v) {
 		$v = trim($v);
 		if (in_array(strtolower($v), $argNames)) {
 			$attr .= ' ' . $v;
 		} else
 		if (preg_match('/^.+\.(jpe?g|png|gif|webp)$/', $v) == 1) {
 			$poster = ' poster="' . htmlspecialchars($v) . '"';
 		} else
 		if (preg_match_all('/\d+/', $v, $match) == 2) {
 			$size = 'width="' . (int)$match[0][0] . 'px" height="' . (int)$match[0][1] . 'px"';
 		}
 	}
 
 	return '<video class="plugin-tinyvideo" ' . $size . $poster . $attr . '><source src="' . htmlspecialchars($file) .'"/></video>';
 }


**ライセンス [#r99f95c7]

GPL v3

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Site admin: PukiWiki Development Team

PukiWiki 1.5.3+ © 2001-2020 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u12. HTML convert time: 0.038 sec.

OSDN