david
2018 年 2 月 24 日午後 5:17
1
https://meta.discourse.org/t/media-overlay-plugin/60549 … の続きから
このテーマコンポーネントを使用すると、ユーザーはサイトを閲覧しながらメディアを「ポップアウト」して浮動ウィンドウとして表示できます。さらに、別のトピックに移動してもメディアの再生は継続されます。
これは任意の <iframe> または <video> と連携します（lazyYT には特別な処理が必要です）。対応する要素ごとにボタンが追加され、それをクリックすると右下に小さなポップアップが開きます。
その後、ポップアップを「最小化」してバックグラウンドで音声を継続させたり、完全に閉じたりできます。
現時点では、動画のサイズは元の埋め込み設定によって決定されます。「リサイズ」機能（ドラッグ＆ドロップによる調整、または「小」「中」「大」の 3 つのボタン）の追加を検討しています。
現在、この機能はコンポーザーを隠してしまう場合があります。投稿を作成したい場合は、ポップアップを閉じるという簡単な解決策があります
テーマの URL は以下の通りです。
https://github.com/davidtaylorhq/discourse-media-overlay-theme
インストール手順は以下に従ってください。
「いいね！」 29
david
2018 年 2 月 24 日午後 5:21
2
I have fixed this with the addition of an explicit z-index, and some explicit colours. With the vincent theme it now looks like this when you mouse-over:
You may want to add some further customisation to make it match your forum’s style
「いいね！」 3
_vincent
2018 年 2 月 24 日午後 6:06
3
Thanks a lot! Works like a charm.
This is great! However Im not sure if its just be but while the video is playing if you:
1.change positions or minimmize and remaximize
2.pause and attempt to unpause
play or pause in post, and to the opposite in the media overlay
It just freezes to the default play button and video thumbnail
Anyone else have this issue?
「いいね！」 1
Can you clarify - is this a them or a theme component?
It might be better if we can scale the screen and move it to anywhere with mouse.
「いいね！」 3
ssvenn
2019 年 10 月 23 日午後 1:37
10
Is the overlay component supposed to work with pasted links to .mp4 files? Like in Should audio and video tags be allowed? ?
I tried enabling it on my forum and it makes the video box disappear completely when the video is oneboxed from a mp4 link.
smrtey
2019 年 11 月 15 日午後 11:22
11
ユーザーが別のウィンドウを開かずに弾劾審議を見られるように、これを直ちに導入しました。すると大変な評判になり（あるコメントには「非常に便利。素晴らしい。これまで経験した中で最も優れたフォーラムインターフェースです」とありました）、スマートフォンやタブレットのユーザーからも同様の要望が寄せられました。モバイルデバイスでは複数のウィンドウを開けないため、この機能は特に重宝します。
タブレットやスマートフォンで有効にするには、Common CSS の 64 行目と 82 行目から no-touch を削除し、以下のように小さな画面でプレーヤーのサイズを調整してください。
@media (max-width: 1024px) {
#media-overlay,
#media-overlay iframe{
width: 400px;
max-height: 225px;
}
}
@media (max-width: 768px) {
#media-overlay,
#media-overlay iframe{
width: 320px;
max-height: 180px;
}
#media-overlay {
&.dock-right {
right: 10px;
}
&.dock-left {
left: 10px;
}
}
}
@media (max-width: 480px) {
#media-overlay,
#media-overlay iframe {
width: 240px;
max-height: 135px;
}
#media-overlay {
&.dock-right {
right: 0px;
}
&.dock-left {
left: 0px;
}
}
}
タッチデバイスでは、長押しがホバーに相当し、コントロールアイコンまたはメディアコントロールを表示します。再度非表示にするには、別の場所をタップしてください。
当初はスマートフォンでは無効にする予定でしたが、プレーヤーを折りたたんだ状態でオーディオを聴けるため、スマートフォンでも依然として便利です。
既知の制限事項だと思われますが、YouTube は折りたたんだ状態で音声を再生できません。また、投稿から YouTube の再生を開始してからポップアウトしようとすると、フローティングウィンドウで動画を再生する方法がありません。まず再生せずにポップアウトし、その後でフローティングウィンドウ内で再生する必要があります。
「いいね！」 5
埋め込み YouTube 動画でも機能するのでしょうか？
「いいね！」 1
smrtey
2019 年 11 月 16 日午後 6:38
14
YouTube 動画を、単にリンクを貼り付けて Discourse の lazyYT を使用するのではなく、iFrame として投稿すれば、正しく動作するようです。
これを機能させるには、サイト上で YouTube の iFrame を有効にする必要があります。そのためには、[設定] → “allowed iframes” に移動し、https://www.youtube.com/ をホワイトリストに登録してください。
その後、iFrame コードを貼り付けます（YouTube の任意の動画について、[共有] → [埋め込む] で iFrame コードを取得できます）。iFrame 経由で埋め込まれた YouTube 動画は、メディアオーバーレイコンポーネントと完全に連携して機能します。つまり、以下のように投稿する必要があります。
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ft1waA3p2_w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
単に https://www.youtube.com/watch?v=Ft1waA3p2_w というリンクを貼るのではなくです。
この iFrame コードは、discourse.org では動作しません。彼らの “allowed iframes” 設定で https://www.youtube.com がホワイトリストに登録されていないためです。しかし、ご自身のフォーラムであれば簡単に追加できます。
以下は、私のスマートフォンでメディアプレーヤーを拡大した状態で当フォーラムに表示された様子です。
そして、縮小した状態です：
「いいね！」 5
また、位置を変更すると動画の再生が再開されません。
smrtey
2019 年 12 月 28 日午後 9:35
16
YouTubeの動画についてお話しされている場合は、私の前の投稿を参照してiframeコードを使用してください。そうすれば、この問題は発生しません。
smrtey
2019 年 12 月 28 日午後 11:55
18
「いいね！」 1
smrtey
2020 年 3 月 4 日午後 11:20
19
メディアオーバーレイコンポーネントが、imgur などのサイトの動画を当フォーラムに表示できない原因となっていました。この問題は、103 行目の video を削除することで解決しました。具体的には、 $('iframe, video, .lazyYT', $elem) を $('iframe, .lazyYT', $elem) に変更しました。
function addOverlays($elem) {
$('iframe, .lazyYT', $elem).wrap("<div class='media-overlay-eligable'></div>")
これにより、imgur の動画が再び動作するようになり、オーバーレイ機能は iFrame や lazyYT とも正常に連携しています。
「いいね！」 2
Falco
2020 年 3 月 5 日午前 12:14
20
この機能に関心のある方へ、iOS の Safari と Firefox は標準でこの対応を行っており、Chrome も次のバージョンで対応を予定しています。
「いいね！」 3
Google Chrome 82 でリリースされる予定ではないのですか？また、Google Chrome のインサイダーチャンネルのいずれかで利用可能ですか？
「いいね！」 1
。
