カテゴリー
開発関連

え、iPad iframe埋め込みだけでインライン音無しYoutube自動再生するん・・・

検証しててびっくりした

前から?いつから??あいぱっどぅるOS出来てから?

・・・そんだけ。

びっくりして久々に調べたけどよーわからんかった。まぁそういうことなんやろ。
実機検証ダイジネ〜!

その他

【iOS/Android/PC対応】ページを開くと動画を自動再生させる方法を調べてみた | 大石制作ブログ
https://blog.s0014.com/posts/2017-12-05-autoplay/#hl4

スマホ(iOS)でも動画を自動再生させよう!(iFrame Player API、videoタグ対応) | 株式会社 エヴォワークス -EVOWORX-
https://www.evoworx.co.jp/blog/video-autoplay/

javascript — iframesとReact.js-YouTubeビデオをアプリに埋め込む方法
https://www.it-swarm-ja.tech/ja/javascript/iframes%E3%81%A8reactjsyoutube%E3%83%93%E3%83%87%E3%82%AA%E3%82%92%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AB%E5%9F%8B%E3%82%81%E8%BE%BC%E3%82%80%E6%96%B9%E6%B3%95/833557315/

React.js チュートリアル[超入門] #06から#14(最終章)|山口 夏生|note
https://note.com/natsukingdom/n/n86f89b43b69d

Reactのコンポーネント内でスクロール位置を取得する · PengNote – 勉強した事や行った場所の感想を書くブログ
https://blog.daisukekonishi.com/post/react-listen-scroll/

カテゴリー
js 開発関連

Youtubeで Failed to execute ‘postMessage’ on ‘DOMWindow’: が止まらない

なんじゃこりゃ

Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://www.youtube.com’) does not match the recipient window’s origin (‘http://sample.com’).

去年は普通に動いていたはずのサイトで、上記のエラーが出ているので調べた。

結局今の所、1)放置2)気持ち悪いけど対処する、の2択

<script src="https://www.youtube.com/iframe_api"></script>

をサイトに読み込ませればいいが、JavascriptIframeApiでも同じ領域を読み込ませるようにしているので、最終的なソースでは二重に呼び出すこととなり、気持ち悪い。。。というわけで、今の所、放置するか、気持ち悪いけど上記スクリプトを読ませるかの二択。

以下経緯

カテゴリー
開発関連

去年のiframe版Youtubeプレイヤーがエラーはいてた

昨年度版イベントサイトをそのまま更新で使ってくだサイと言われたやつが今年はエラーはいてたのでメモ

console見たらエラー吐いてた

Failed to execute 'postMessage' on 'DOMWindow'

ぐぐったらすぐありがたい経典が出てきました

Youtube貼り付けでJSエラー – サイコロン

ytPlayerの中のplayerVarsにorigineを付ければ直るらしいので、locationで取り込むよう追記。

originを指定しよう

playerVars: {
"rel": 0,
"autoplay": 0,
"wmode": "opaque",
'origin': location.protocol + '//' + location.hostname + "/"
}

だそうです。
ありがてえ・・・ありがてえ・・・

カテゴリー
js

youtube cast_sender.js エラー

Developer_Tools_-_http___miraipj2_1-10_jp_future_jobs__と_top_js_—_benesse
youtube 埋め込み iFrame版でなんかChromeのコンソールでエラー出る。
キモい。なにこれ。なにこれ珍百景。
前からだけど。キモい。

javascript – Chrome YouTube cast_sender.js console error – Stack Overflow
http://stackoverflow.com/questions/25814914/chrome-youtube-cast-sender-js-console-error

「エクステンションを入れてる環境のために叩いてるjsのエラーだから別に埋め込みに問題があるんじゃないよ」
ふーん。キモい。

カテゴリー
js

YouTubeシンプルプレイヤーをjQueryプラグイン化しようとしてはまったpoint

なんか動かんな〜と思って調べたのでメモ書き

その1:onYouTubeIframeAPIReadyはプラグインの中に入れてはならない

http://stackoverflow.com/questions/12256382/youtube-iframe-api-not-triggering-onyoutubeiframeapiready

Make sure your onYouTubeIframeAPIReady function is available at the global level

グローバルの領域に置けって書いてます、了解っす。

その2:[player名].playVideo()が動かん

コンソール見たらObject #S has no method ‘playVideo’っていわれる

http://stackoverflow.com/questions/20249948/youtube-api-playvideo-pausevideo-and-stopvideo-not-working

you should utilize the onReady callback parameter of the YT.Player object

YT.Playerオブジェクトが出来る前に呼んでんじゃね?とおっしゃっている。
コンソールで[player名]の中身見ると先に全ての値が帰ってきていたので
そうじゃねーんだけどなーと思いつつ、onReadyで設定するとなおったのでまぁいったん詳しい話はいいですわ。どうもすみませんでした。あざます。

iPhoneとかiOSではYoutube iframe APIでの制御に制限が出るよ

iOSでのYoutube iframe APIの挙動について、なんか使うメソッドによって動いたり動かなかったりマチマチ。なになにバグなの?と調べたらお優しい方の記事あった。あったよーおかーさーん!!

・iFrame版APIで制御していて
・自動再生・動画の変更 をしようとすると
・画面が真っ黒になって動かない場合
「ユーザーが再生させる意思表示して(タップして)ないのに勝手に操作すんなや」ってことらしい。

つまりユーザーがプレイヤーをタップしていない時に起こる。
タップしてないのに制御しようとすると起こる。

なるほど。。そういやそんな話聞いたことあったな(遠い目)
というわけで、IDで動画を差し替える奴も、一回プレイヤーをタップした後だと普通に動いたー。
でも「再生させるにはタップしてね!」とか書けないし。。。むうーん。

■わかりやすい記事。ありがとうございますー
http://pointofviewpoint.air-nifty.com/blog/2013/10/youtube-apiioss.html

Youtube関連 Links

埋め込みのカスタマイズ
パラメータつけてあげる事で出来るよっと。
■公式
https://developers.google.com/youtube/player_parameters?hl=ja#rel

■小粋空間さん
http://www.koikikukan.com/archives/2012/04/24-015555.php

■その他、詳しい検証記事!!
http://blogs.yahoo.co.jp/sea_story_2/12553942.html

YouTube動画の21のパラメータまとめ+αと埋め込みコードの実例

埋め込みコードをいじるバージョンがiFrame版、AS版(2・3)あり。
またAPIはiFrame verはhtml5前提なりよ。

■iFrame版をAPIで制御する
http://www.crystal-creation.com/web-appli/technical-information/web-api/google/youtube/player-api/iframe.htm

[2013.10.30 追記]
■iOSでは一部のメソッドに制限が出るよ
http://pointofviewpoint.air-nifty.com/blog/2013/10/youtube-apiioss.html

iFrame版をAPIで制御していて、自動再生・動画の変更 をしようとすると、画面が真っ黒になる場合、
「ユーザーが再生させる意思表示して(タップして)ないのに勝手に操作すんなや」ってことらしい。

iPhoneとかiOSではYoutube iframe APIでの制御に制限が出るよ

[2013.11.14 追記]
■IE9ではz-indexを無視しやがるよ!
wmode:’transparent’でなおったよ!
http://www.crystal-creation.com/web-appli/technical-information/web-api/google/youtube/player-api/iframe.htm