てがろぐでmp3やmp4を埋め込み表示する

てがろぐの「画像の管理」にはデフォルトでは画像ファイルしかアップできませんが、「設定>システム設定>アップロードを許可する画像形式」で拡張子を許可すると動画や音声ファイルをアップロードできるようになります。

ただ、本文中に挿入しようとすると[PICT:ファイル名]というてがろぐ記法になり、これはCGIで<img src="画像フォルダ/ファイル名" ~>に置換されてしまうため正しく表示されません(~Ver.4.4.2時点)。

これを埋め込み表示するjavascriptが以下です。「画像の管理」で編集したフラグも反映できるようにしました。自サイトで配布しているスキンは次回更新あるいは新規配布のものはこちらの仕様になります。

document.addEventListener('DOMContentLoaded', function () {
	// MP3の画像をオーディオ要素に変換
	document.querySelectorAll('img[src$=".mp3"]').forEach(function(img) {
		var audio = document.createElement('audio');
		audio.controls = true;
		audio.className = img.className;

		var source = document.createElement('source');
		source.src = img.src;
		source.type = 'audio/mp3';

		audio.appendChild(source);
		img.parentNode.replaceChild(audio, img);
	});

	// MP4の画像をビデオ要素に変換
	document.querySelectorAll('img[src$=".mp4"]').forEach(function(img) {
		var video = document.createElement('video');
		video.controls = true;
		video.className = img.className;

		var source = document.createElement('source');
		source.src = img.src;
		source.type = 'video/mp4';

		video.appendChild(source);
		img.parentNode.replaceChild(video, img);
	});
});

このコードを<script></script>で囲ってskin-cover.htmlの</body>直前に入れるか、外部jsファイルとして読み込んでください。サンプルはNSFWフラグ付動画表示テスト - てんぷろぐで見られます。

なぜ今更このコードを紹介するかというとツイッター → てがろぐ変換 βで動画ファイルも拾えるようにした際に記事本文中に画像ファイルと同じてがろぐ記法で挿入する仕様になっているからです…。

最上部へ 最下部へ