【忘備録】2020年6月のTwitchサイレントアップデート？に伴う、動画埋込不可の解決策【JavaScript】
アンボと申します。
タイトルそのままの内容。
2020年6月のTwitchサイレントアップデートに伴う、動画埋込不可の解決策。
ほぼ忘備録。
この症状に直面した他の人の助けにもなれば幸い。
従来のUIの画像は私の手元には残っていないため、TwitchStreamer の"もこと"氏のブログから拝借したいと存じる。
何か問題があればご連絡下さい。
https://mokolog.style/twitchchannnelvieobury/
最終アクセス：2020年6月12日
発生する問題
従来はここからコードをコピーして、HTML内に貼り付けるだけだった。
超簡単。
しかしこれが唐突に利用できなくなった。
その上、過去の記事に搭載しているTwitch埋め込み動画は全て表示されなくなった。
もこと氏の埋め込み動画はこう表示され、閲覧することができなかった。
おそらく全員がこの症状に悩まされていることだろう。
この解決策を発見したので、その手法を共有したい。
解決策
JavaScript を使おう。
シェア → 埋め込み でもコードが表示されるが、このコードは不完全なので、一手間加えたコードを紹介する。
（ちなみにここの iframe というやつは私の環境では動作しなかった）
定型文
<div id="ユーザが定義したID"> </div>
<p>
<script src="https://player.twitch.tv/js/embed/v1.js"></script>
<script type="text/javascript">// <![CDATA[
new Twitch.Player("ユーザが定義したID", {
width: 横幅,
height: 縦幅,
video: "動画ID",
time: "時間指定",
autoplay: false
});
// ]]></script>
</p>
私はこのブログにて、このコードをこのまま複製して使用している。
そして使用する度に必要に応じて日本語の箇所を書き換えるだけでOK。
ちなみに「autoplay: false」の一文がないと、ページを開いた段階で動画が再生される。クッソ迷惑。
ユーザが定義したID: twitch-embed（デフォルトでこれ）
width: 560
height: 315
video: "647708295"
time: "02h00m02s"
とした場合の埋込動画はこうなる。
あと1歩でチャンピオンだった。惜しい。
はい解決〜。
プログラムが理解できて、更なる意味やコードを知りたい場合はヘルプを参照
更なる問題
ここで新たな問題が生まれる。
もし2つ以上の埋込動画を離れた場所に表示させたい場合、動画が並列して表示される問題が発生する。
例
動画A → 文章A → 動画B
と表示させたいのに、
動画A → 動画B → 文章A と表示される。
当然、コードの順番は間違ってはいない。
原因
上述の「ユーザが定義したID」が同一であると引き起こる。
例
動画A・動画Bの「ユーザが定義したID」が共に「twitch-embed」
解決策
動画Aの「ユーザが定義したID」を「twitch-embedA」
動画Bの「ユーザが定義したID」を「twitch-embedB」
とかにする。自由に変更可能。
はい解決〜。
質問は受け付けておりません。
