Chromeで視聴画面を埋め込みにするとYoutubeが再生されない #373
Assignees
Labels
bug
Something isn't working
Comments
horimasumi
changed the title
|
Blackboardでの状況について、以下に記載させていただきます。 Blackboard内にiframeで埋め込む形で本システムを表示すると、以下の環境で動画が再生されない（再生ボタンを押してもずっとローディング中（回転矢印）が表示され動画が再生されない）不具合が発生します。 - ブラウザ：Chrome（89.0.4389.114 (最新)） 同じ環境でも不具合が発生する場合と発生しない場合があり、 Blackboardでは、学生権限で起動すると埋め込み表示になりますが、 解決方法としては、新しいページにリダイレクトする形でシステムを起動する必要があると思います。 |
|
環境
手順
にて、自動再生が開始されないことを確認しました |
再現時の youtube iframe の中身:
追記: これは再生できるケースでも同じ応答が返ってきてたかも。単にプレビューで表示するとエラー画面のように見えるだけで。 |
|
自動再生ができない件については、Linux Chrome 89.0.4389.114（Official Build） （x86_64）でも再現することを確認。 |
これはあくまで @dynamis さんの報告・追記にあるとおりDevTools Preview パネルで確認しただけ |
ごめん、先ほどの DevTools Preview, Chrome 別ウィンドウ表示や Edge 埋め込み表示で再生できているときも同じ URL アクセスでエラーと表示されて、単に Preview でアクセスすると (JS 実行されないなどの制限の結果) そのように描画されているだけで実際の処理としてエラーになっているのかどうかの判断には使えなかったかも。 |
そうかもですね。たしかに手元で問題ないときも同じようなものが表示されました。 |
「自動」再生ができない，ではなく，再生できない，という現象です．念のため． |
自動再生されないことに加え、再生ボタンを押しても再生しない、ということですよね。コメントありがとうございます。 |
|
chrome://media-engagement/ で www.youtube.com が Is High = Yes になっている chrome プロファイルでも再生出来ないことを確認しました。そもそも MEI って ifreme のドメインじゃなくてトップのドメインに対してカウントされるんじゃないかと思うのですが。 |
|
https://trial.chilos.jp や https://f-omega.vercel.app (ついでに https://www.youtube.com ) での EMI も Is High = Yes にしても再生できないことを確認。 |
|
再生できない環境で iframe の入っている div 以外の poster フレームなどの div を全部削除したらクリックが通って再生可能なことを確認。
という状態になっているのかな。 |
|
@dynamis 詳しい考察と調査ありがとうございます! なるほど。 |
|
具体的には |
ということからも video.js 的には再生開始しているつもりになってるが再生できてないよねって気持ちだろうか。なんもコンソールエラー出ないのは video.js の設定とかで変えられないだろうか。video.js デバッグしたいお気持ち。 |
|
単純に CC としては自分がトップフレームではなくブラウザが Chrome である時は autoplay しようとしない、もしそれでも videojs が勝手に追加する poster frame がクリックイベント奪って邪魔なら poster frame 表示しないようにする (どうやって出来るのかは未確認) という形にするのが良さそうに思う。 YouTubePlayer.tsx で autoplay options 受け渡してるけど poster も渡せそうに見える。その辺りでの対応だろうか。 以下だらだらメモ: videojs-youtube の issue CC の iframe が allow="autoplay" 付与されていないのに (youtube の iframe でだけ allow="autoplay" していて) ユーザ操作無しで play() 読んで NotAllowedError で怒られているが、videojs-youtube がそのようなケースを想定していないから問答無用で .vjs-loading-spinner を回して再生開始待機状態かつ .vjs-poster でユーザが直接再生ボタンを押すのも邪魔している感じ？ CC が埋め込みされているときには autoplay 勝手にしようとしないのが正しそうに思うが videojs-youtube のコードをちゃんと読んで修正しないと出来なさそう。 ちなみに style="pointer-events: none" を .vjs-poster に付与すると邪魔されなくなるから手動クリックで再生開始はできるようになるが、動画の真ん中のボタン部分じゃないとダメ＆ spinner が先に回ってる状態はやっぱおかしいという形。そもそも videojs 側が自前で poster frame なんか出さなくて良いんじゃなかと思った。 ブラウザの挙動が日々変わる分野で更新されてない古いライブラリ使うと罠がありますね... |
|
不具合の実証コード: https://dezz7.csb.app/ |
|
MoodleのIssueを見ているとifameにallow=autoplayを加えるというものがありますね。 |
CSSで消すと、たしかにYouTubeの再生ボタンを表示させ機能させることができますね。 .video-js .vjs-poster {
display: none !important;
}
.video-js .vjs-big-play-button {
display: none !important;
}
.video-js .vjs-loading-spinner {
display: none !important;
}少し乱暴な実装ですがとにかく消せました! 🎉
Optionsからは変更できませんでした。
|
やっぱ取り急ぎという事でいうとそんな感じですよね。 iframe 埋め込みされており (トップフレームではない) かつ Chrome の場合だけスタイル指定追加が妥当な落とし所か。 そもそも iframe 埋め込みする側で、Moodle 3.6 or later みたいに
としてくれるのが本来のあるべき姿で、CC 側が iframe 埋め込まれ対応をするというのはちょっと無茶がある所なので綺麗な実装にならないのも仕方なさそうですね。そもそもサービス側のプレイヤーを埋め込むという方針を採る異常はサービスとブラウザによってバラバラなのは避けがたく、このパターンの時だけのために videojs を作り直す意味はないし。
思いつきで書くだけ書いて追記し忘れてました。poster オプションが画像ファイル名しかなく「消す」という指定方法が定義されてなかったので無理かなとも思った＆videojs youtube のコードチラ見したらポスターフレームは明示的に上書きしたらそれを使うがそうじゃなければ img.youtube.com 使う形でこれは消せなさそうなコードだなという感じで確実無理でした。m(_ _)m |
|
これ、hackのたぐいなので、将来も動くとは保証できないやつですよね.... |
|
Video.jsやvideojs-youtubeのバージョンには依存しそうですね。 |
|
私のMacでも確認できました．トピック1つ1つをクリックする必要はありますが，クリックすると再生されますね． |
|
@horimasumi 確認ありがとうございます。
Wowzaのプレイヤーとの見た目の一貫性が損なわれる、という点以外に、機能的には特に見つかっていません。 |
|
@kou029w 念のため確認ですが，CSSを変更ても，自動再生される場合は，Youtube , Wowza 関係なく自動再生される理解で正しいでしょうか？ |
はい、正しいです。 |
|
@kou029w さん，それでは，スタイルシートを変更して，一旦このイシューはクローズにしたいと思います． |
|
@horimasumi @ties-makimura #379 にて対応しました。ご確認ください。 |
|
ブラックボードの学習モジュールに埋め込んだ場合，全画面ボタンが機能しない模様，ただしMoodleの埋め込みでは機能している． |
|
Blackboad特有の現象であった．対応は別途，検討する． |
|
埋め込み側のiframeタグでその中でフルスクリーンボタンが使えるかどうかは制御します(iframe内で出来ることはどんどん制限が厳しくなっており、そういう仕様です)。 埋め込まれる側であるCC側ではなにも出来ません。 |
|
フルスクリーンボタンの話は #382 に分けました |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
そのバグについ
再現手順
以下の，
https://trial.chilos.jp/course/view.php?id=112
youtube（埋め込み）
wowza（埋め込み）
で，確認できる．
スクリーンショット
YouTube
デスクトップ再現環境 (下記をうめてください):
スマートフォン再現環境 (下記をうめてください):
The text was updated successfully, but these errors were encountered: