Moonlight Dream

PSO2で過ごした日々をのんびり書き綴っていければと思っています。
埋め込みの twitch動画を見ることが出来ない場合、 本ブログを見るときのURLを http → https に変更してみて下さい。
2020年7月より以前の記事に埋め込まれた動画は twitchの仕様変更に伴い、全てエラー出力されます。御了承下さい。
エラーになっている画面内の ゴーストのアイコンや twitchの文字をクリックすると、 当該動画ページに飛べるので、それをお試しください。

配信動画の埋め込みについて

現在、全ページ冒頭でアナウンスしているように、過去記事に埋め込んだ Twitch動画を見ることが出来ていません。ただ、この文章…少し内容が変わりました。色々分かったことがあるので本記事で取りまとめます。

結論からいうと、条件さえ満たせば、動画埋め込みは使えます。が、やはり過去記事の埋め込みについては、今後も見ることは出来ない状態が継続となります。なんというか…うまく埋め込み動画を見るためには、ブログを見る人・ブログを書く人の双方が条件を満たさなければならないんです。

まず「ブログを見る人」の方は、冒頭アナウンスでも書いたとおり…

今後は https から始まるURLで御覧下さい。


…ということになります。
http → https と変えるだけで、他は変える必要はありません。

すなわち今後は https://ellena749.blog-mmo.com/ でご覧頂きたい、ということです。そうすれば、今後の記事では埋め込み動画を過去と同じように再生できるようになるはずです。全ページ冒頭のアナウンスについて、そのように文言を修正しました。

セキュリティ的な意味でも、これは良いことだと思います。古いブラウザでは未対応かもしれないので、その場合はこの方法は使えません。とはいえ、そんなPCを使う機会は、まず無いと思います。

ただし繰り返しになりますが、仕様が変わる前の記事の埋め込み動画はやはり見ることが出来ません。それは「ブログを書く人」が満たすべき条件を満たせていないからです。なので、これはリンク先をたどって見て頂くことになります。書く側の条件は本文の方で書こうと思います。



httpsから始まるURLで、この記事を見ていれば、以下の埋め込み動画を普通に見ることが可能なはずです。これはラスター実装前に、エレナが短杖エトワールでアポストロドラゴンと遭遇した時の様子です。


もともとTwitchの仕様変更もセキュリティ的な強化が目的なのかなあ、というところはあります。というわけで「ブログを書く人」がやらなければいけないことを書いていきます。

自分のWEBページに動画を埋め込みたい場合、Twitchの動画再生ページで埋め込み用のスクリプト文言をコピーする必要があります。今と少し見た目は違いますが、以前からそれは変わりありません。

ただ、今の埋め込み用の文言は上記の動画の場合、以下のようになっていて、これをただコピペするだけでは駄目になったのが、今回の問題です。
<iframe width="620" height="378" src="https://player.twitch.tv/?video=740768424&parent=www.example.com" frameborder="0" allowfullscreen="true" scrolling="no"></iframe>
この文言の内容は時期によってだいぶ変わりますが、width (埋め込み動画の横サイズ)・height (埋め込み動画の縦サイズ) は常に含まれており、このままだと本ブログでは大きいので 400 と 223 に変更していました。

また src="~" の中に &autoplay=false が入っていない場合は、付けています。そうしないと動画が自動再生されてしまうからです。自動再生の場合、無音での再生になりますが、複数の動画を埋め込んでいるとカオスになります。

そして全く新たな項目として、src="~" の中にある parent=~ について親ページのURLをきちんと入れなければならなくなった…というのが、今回の仕様変更のポイントです。というわけで本ブログの場合、上記の「www.example.com」となっているところを「ellena749.blog-mmo.com」に変更する必要があるということです。

これが「ブログを書く人」が対応しなければならないことでした。実はこれに関しては、API仕様から分かっていたのですが、httpで始まる URLアクセスをしていたため、私はうまく動画が再生できていませんでした。

なので、parentを正しく記述して、httpsから始まるURLでアクセスしてもらうことで、動画は正しく埋め込まれ、再生ができるようになるはずです。ただ、ブラウザのセキュリティ設定が厳しい場合は、うまくいかないかもしれません。

さしあたり…動画埋め込みが出来る方が、ブログを書く側は楽なので、一定の解決方法が見つかって良かったなあと思ってます。過去の埋め込み動画を全て修正してまわるのは、さすがに辛いので御容赦下さい…。