pukiwiki1.5/twitch.inc.php の履歴(No.4)

Twitchの動画をPukiwikiに埋め込む#

概要#

  • Pukiwiki1.5/youtube.inc.php を参考にねむすぎが作成したもの
  • video , clip , channel に対応
  • iPhone(iOS 16.6.1)からだとvideoだけ再生できない問題が発生中（SafariでもChromeでもNG）。iPad(iOS 15.6.1 /17.7.2), androidでは問題なさそう。他所のブログに貼っても同じ挙動だったのでpukiwikiの問題ではなさそう。
    • APIリファレンス読んだけどparentをちゃんと設定しよう、埋め込むサイトはHTTPS対応必須というぐらいのことしか書いてない。
  • 自動再生の制御は &autoplay=false です。自動再生したい場合はこの文字列をファイルから消してください。

videoを埋め込む#

https://www.twitch.tv/videos/1963266362

を埋め込む場合

#twitch(1963266362)

clipを埋め込む#

https://clips.twitch.tv/embed?clip=HorribleDifferentFiddleheadsNerfBlueBlaster-59s5pgvyQdUbt2G0

を埋め込む場合

#twitch(HorribleDifferentFiddleheadsNerfBlueBlaster-59s5pgvyQdUbt2G0,clip)

channelを埋め込む#

https://www.twitch.tv/nemusg

を埋め込む場合

#twitch(nemusg,channel)

検証用#

clip

<iframe src="https://clips.twitch.tv/embed?clip=HorribleDifferentFiddleheadsNerfBlueBlaster-59s5pgvyQdUbt2G0&parent=www.example.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>

video

<iframe src="https://player.twitch.tv/?video=1963266362&parent=www.example.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>

channel(LIVE)

<iframe src="https://player.twitch.tv/?channel=nemusg&parent=www.example.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>

プラグイン本体#

twitch.inc.php として保存して pluginフォルダにアップロードしてください。

<?php
// Twitch埋め込みプラグイン
// twitch.inc.php
//
// Copyright(c) 2023 nemusg
// for PukiWiki

function plugin_twitch_convert()
{
	define('WEBSITE_URL',"note.nemusg.com" , true); //動画を埋め込みたいドメイン名を入れてください（必須）
	define('DEFAULT_WIDTH',"620px" , true);
	define('DEFAULT_TYPE',"?video" , true);
	define('DEFAULT_DOMAIN',"player" , true);

	$width = DEFAULT_WIDTH;
	$type = DEFAULT_TYPE;
	$domain = DEFAULT_DOMAIN;

        if (func_num_args() < 1) return FALSE;

        $args = func_get_args();
        $name = trim($args[0]);
        $websiteurl = WEBSITE_URL;
        
	if($args[1]==="channel"){ //channel
        	$type = "?channel";
	}
	if($args[1]==="clip"){ //channel
        	$type = "embed?clip";
        	$domain = "clips";
	}
	
	if($args[2]){ //width
        	$width = trim($args[1])."px";
	}

        $body = <<<EOM
<div style="max-width: $width;">
<div class="twitch" style="
  height: 0;
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
">
<iframe style="position:absolute;width:100%;height:100%;top:0;left:0;" src="https://$domain.twitch.tv/$type=$name&parent=$websiteurl&autoplay=false" frameborder="0" allowfullscreen="true" scrolling="no" height="348" width="620"></iframe>
</div>
</div>
EOM;
        return $body . "\n";

}

function plugin_twitch_inline() {
        //使用しない
}
?>

CSS#

pukiwiki.css などで設定してください

div#textBody .twitch {
  max-width: 580px;
  margin: 0 8px 16px;
}
@media (max-width:767px) {
  div#textBody .twitch {
    max-width: unset;
  }
}