トップ/pukiwiki1.5/twitch.inc.php
#author("2023-11-04T20:15:58+09:00","default:nemusg.pad","nemusg.pad") #author("2023-12-14T19:20:45+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 https://clips.twitch.tv/embed?clip=SpoopySmoggyPizzaDeIlluminati-efqluiGRzSTQAnsT を埋め込む場合 #twitch(HorribleDifferentFiddleheadsNerfBlueBlaster-59s5pgvyQdUbt2G0,clip) #twitch(HorribleDifferentFiddleheadsNerfBlueBlaster-59s5pgvyQdUbt2G0,clip) #twitch(SpoopySmoggyPizzaDeIlluminati-efqluiGRzSTQAnsT,clip) #twitch(SpoopySmoggyPizzaDeIlluminati-efqluiGRzSTQAnsT,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; } } }}