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

#author("2023-11-04T20:15:58+09:00","default:nemusg.pad","nemusg.pad")
* Twitchの動画をPukiwikiに埋め込む [#q460640d]

#contents

** 概要 [#sd3b92ec]

- [[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リファレンス:https://dev.twitch.tv/docs/embed/]]読んだけどparentをちゃんと設定しよう、埋め込むサイトはHTTPS対応必須というぐらいのことしか書いてない。
- 自動再生の制御は `&autoplay=false` です。自動再生したい場合はこの文字列をファイルから消してください。

** videoを埋め込む [#l394a414]

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

を埋め込む場合

 #twitch(1963266362)
#twitch(1963266362)

** clipを埋め込む [#l394a414]

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

を埋め込む場合

 #twitch(HorribleDifferentFiddleheadsNerfBlueBlaster-59s5pgvyQdUbt2G0,clip)
#twitch(HorribleDifferentFiddleheadsNerfBlueBlaster-59s5pgvyQdUbt2G0,clip)

** channelを埋め込む [#kdd2e53d]

 https://www.twitch.tv/nemusg

を埋め込む場合

 #twitch(nemusg,channel)
#twitch(nemusg,channel)


** 検証用 [#d3908aed]

#code_x{{
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>
}}

** プラグイン本体 [#f55e4164]

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

#code_x{{
<?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 [#q0c64d2a]

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

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