Extension:EmbedVideo

From mediawiki.org
This page is a translated version of the page Extension:EmbedVideo and the translation is 100% complete.
MediaWiki 拡張機能マニュアル
OOjs UI icon advanced-invert.svg
EmbedVideo
リリースの状態: 安定
EmbedVideoExample1-new.png
実装 パーサー関数
説明 一般的な動画共有サービスのビデオクリップを埋め込むための#evというパーサー関数を追加する
作者
最新バージョン 2.9.0 (2020-10-14)
MediaWiki 1.29+
PHP 7.0+
ライセンス MIT ライセンス
ダウンロード
Gamepedia Help Wiki

使用状況とバージョン マトリクスを確認してください。

Vagrant role embedvideo

EmbedVideo拡張機能では、24以上の人気動画共有サービスの動画クリップを多言語・多国で埋め込むためのパーサー機能#evを追加しています。 また、ビデオとオーディオのメディアハンドラを追加し、標準の[[File:Example.mp4]]ファイルリンクを埋め込み型のHTML5 ‎<video>および‎<audio>タグに変換することをサポートします。

プロジェクトのホームページ
GitLab の説明文書
ソース コード
GitLab のソースコード
バグ
GitLabの課題
ライセンス条件
EmbedVideoは、The MIT Licenseの下でリリースされています。
GDPR準拠のフォーク
GitHub のソースコード - EmbedVideo のプライバシーをより重視したバージョンに焦点を合わせています。 なお、YouTube、Spotify、Vimeo、Archive.orgのみ対応で、#ev以外の全てのパーサー機能は削除されています。
2.x シリーズでは、EmbedVideo 拡張機能は、新しいメンテナと完全に書き直されたコードベースを持っています。 EmbedVideo 1.0およびEmbedVideoPlusとの後方互換性を保持します。

使用法

メディアハンドラ

ローカルにアップロードされたコンテンツの場合、ページへの表示方法は画像と同じです。 この機能に関する完全なリファレンスは、画像構文のドキュメントを参照してください。

この例では、HTML5の‎<video>タグを使って、ページ内に動画を表示します。

[[File:Example.mp4]]

メディア内の開始と終了のタイムスタンプを指定するには、startとendパラメータを使用します。 タイムスタンプの形式は、ss, :ss, mm:ss, hh:mm:ss, or dd:hh:mm:ssのいずれかとすることが可能です。

[[File:Example.mp4|start=2|end=6]]

タグ

EmbedVideo パーサー関数は、以下のいずれかの方法で呼び出されることを想定しています。

#ev — 古典的なパーサタグ

  • {{#ev:service|id}}
  • {{#ev:service|id|dimensions}}
  • {{#ev:service|id|dimensions|alignment}}
  • {{#ev:service|id|dimensions|alignment|description}}
  • {{#ev:service|id|dimensions|alignment|description|container}}
  • {{#ev:service|id|dimensions|alignment|description|container|urlargs}}
  • {{#ev:service|id|dimensions|alignment|description|container|urlargs|autoresize}}
  • {{#ev:service|id|dimensions|alignment|description|container|urlargs|autoresize|valignment}}

ただし、必要であれば、パイプの間に何も入れず、オプションの引数を空白にすることもできる。

  • {{#ev:service|id|||description}}

#evt — テンプレート用パーサータグ

#evtパーサーのタグは、key=valueのペアを使用できるため、テンプレート化しやすく、可読性も高くなります。

{{#evt:
service=youtube
|id=https://www.youtube.com/watch?v=eAORm-8b1Eg
|alignment=right
}}

#evu — URL用パーサータグ

#evuパーサータグは#evtタグと似ていますが、その最初のパラメータは、サービスを自動的に決定するために解析されるURLです。

{{#evu:https://www.youtube.com/watch?v=eAORm-8b1Eg
|alignment=right
}}

‎<embedvideo> — タグフック

‎<embedvideo>...‎</embedvideo>のタグフックを使えば、簡単に動画を埋め込むことができます。 ID/URLはタグの間に入力され、パラメータはタグの引数として追加することができます。

<embedvideo service="youtube">https://www.youtube.com/watch?v=eAORm-8b1Eg</embedvideo>

また、サービスIDをタグとして使用することもできます(他の拡張機能がまだこのタグを使用していないことが前提です)。

<youtube>https://www.youtube.com/watch?v=eAORm-8b1Eg</youtube>

パーサタグの属性

属性 説明 必須かどうか 既定値
service="(後述の「サポートサービス」を参照。)" 呼び出すビデオサービスです。 必須
id="[id|url]" プレーヤーページからの動画またはURLの生のID。 必須
dimensions="[WIDTH|WIDTHxHEIGHT|xHEIGHT]" 埋め込みコンテナの大きさを表すピクセル単位の寸法。 標準的な形式は幅x縦(高さ)で、どちらかを省略することもできるが、xは高さを表示するために必要になります。

例:480、​480x320、​x320。 高さを指定しない場合、幅とサービスの既定の比率から自動的に計算されます。

Gfycatなど一部のサービスでは標準的な高さがないため、埋め込みごとに指定する必要があります。 $wgEmbedVideoDefaultWidthLocalSettings.phpにおいて、デフォルトの幅を上書きするために設定することができる。

省略可能 640
alignment="[left|center|right|inline]" 映像の配置を左寄せ、中央寄せ、右寄せのいずれかにします。 インラインでは、複数のビデオを強制的に改行することなく並べて表示することができます。 省略可能 なし
description="[wikitext]" 埋め込みコンテナの下に説明文を表示する。 改行には&#10;(https://www.w3.org/TR/REC-xml/#AVNormalize参照)を使用します。 省略可能 なし
container="[frame]" 埋め込みに使用するコンテナの種類を指定する。
frame — Mediawikiのサムネイルボックスでビデオプレーヤーをラップする。
省略可能 なし
urlargs="modestbranding=1&version=3" 生成された埋め込みURLに、追加のURL引数を付加できるようにする。 これは、あるサービスにしか対応していない不明瞭なオプションに有効です。 省略可能 なし
autoresize="false" 動画のサイズがコンテナ要素の外側で壊れてしまう場合、自動的にリサイズされます。 省略可能 true
valignment="[top|middle|bottom|baseline]" 動画の垂直方向の配置を、親要素の上、中央、下、ベースラインのいずれかに揃える。 このパラメータを使用すると、alignmentパラメータがインラインになるように強制されます。 省略可能 なし

例#1

例えば、YouTubeの動画は、youtubeのサービスセレクタを使用します。 IDだけのいづれかを指定することができます。

{{#ev:youtube|eAORm-8b1Eg}}

または完全なURLを指定する。

{{#ev:youtube|https://www.youtube.com/watch?v=eAORm-8b1Eg}}

同じ動画を右寄せの大きなサムネイルで、説明文付きで表示する場合。

{{#ev:youtube|https://www.youtube.com/watch?v=eAORm-8b1Eg|1000|right|Let eet GO|frame}}

YouTubeで動画を特定の時間に開始させる場合は、urlargs(URL引数)パラメータを利用します。 カスタムURLから残りのURL引数を取り出して、urlargsに入れます。 すべての動画サービスが追加のURL引数をサポートしているわけではなく、またURL引数のキーが異なる場合がありますので、ご注意ください。

https://www.youtube.com/watch?v=eAORm-8b1Eg&start=76
{{#ev:youtube|https://www.youtube.com/watch?v=pSsYTj9kCHE|||||start=76}}

URL引数で動画を切り刻み、ループさせることができる。

https://www.youtube.com/watch?v=eAORm-8b1Eg&start=160&end=180&loop=1
{{#ev:youtube|https://www.youtube.com/watch?v=eAORm-8b1Eg|||||start=160&end=180&loop=1}}

ビデオリンクタグのサポート

バージョン2.5から、未整備のVideoLink拡張のタグに対応しました。

オリジナルの拡張機能のドキュメントより。

VideoLink拡張機能は、記事中にYouTube動画を埋め込むことができ、ユーザーが動画リンクをクリックしたときに最初に表示される埋め込み動画プレーヤーで、リンク先の複数の動画を再生することが可能です。

<evlplayer />はページ内のプレーヤーを表示する場所を指定し、2のパーサー関数で特定のビデオを読み込むリンクを作成できます。

‎<evlplayer> — ビデオコンテナ用タグフック

後方互換性のために、ここでは‎<vplayer>タグの使用も許容される。

この‎<evlplayer>タグは、ビデオプレーヤーコンテナをページ内に配置するために使用されます。

<evlplayer id="player id" w="width" h="height" class="class" style="style">デフォルトコンテンツ</evlplayer>

また、デフォルトコンテンツの代わりに、デフォルトでコンテナを埋める動画を設定することも可能です。

<evlplayer id="player1" w="480" h="360" service="youtube" defaultid="eAORm-8b1Eg" />
属性 必須かどうか 既定値 説明
id 省略可能 default このコンテナに対するオプションの一意な識別子。
w 省略可能 800 埋め込みプレーヤーが生成される際に送信される幅。
h 省略可能 幅から16:9を実現する 埋め込みプレーヤーが生成されたときに送信する高さ。
class 省略可能 コンテナ‎<div>に追加するCSSクラス。
style 省略可能 コンテナ‎<div>に適用する追加のインラインCSS。
defaultid 省略可能 デフォルトビデオのビデオID。
service 省略可能 デフォルトの動画が必要な場合は、デフォルトの動画のサービス。

注意すべき重要な点は、whの属性は、コンテナ‎<div>に含まれるビデオにのみ影響し、実際のコンテナには影響しないことです。 コンテナのスタイリングには、classまたはstyleの属性を使用してください。

#evl — 動画リンク用パーサー機能

後方互換性のために、ここでは{{#vlink}}パーサー関数の使用も許容される。
{{#evl:<動画 ID>|<リンク テキスト>|<再生する動画>|service=youtube|player=<プレイヤー ID>}}

#evtタグでサポートされているすべての属性に加え、これらの特定の属性が#evl(および#vlink)タグに適用されます。 後方互換性を維持するため、serviceを定義しない場合はyoutubeと見なされます。

属性 必須かどうか 既定値 説明
動画 ID 必須 なし 再生したいビデオのID、または再生するビデオのカンマ区切りリスト。 セミコロンで区切られた複数のビデオIDの使用は、現在では推奨されていませんのでご注意ください。
リンク テキスト 必須 なし リンクの内側に表示するテキスト。
再生する動画 省略可能 なし ビデオIDがカンマ区切りの場合、ビデオIDから再生するビデオを示す番号。
動画 ID 省略可能 default 動画を読み込むプレーヤコンテナ。 IDdefaultは、IDのないプレーヤーを定義した場合のみ存在することに注意してください。
最初のビデオ 廃止予定 オリジナルのビデオリンクでは、複数のビデオが定義されている場合、どのビデオを最初に再生するかを定義していました。 ビデオIDおよびスタートでの注意事項をご覧ください。
開始 廃止予定 0:00 オリジナルのビデオリンクでは、これは動画の開始時刻を定義していました。 複数の動画サービスに対応しているため、urlargs>パラメータでこの機能を再現できるようになりました。 後方互換性のために、この属性は、サービスyoutubeを持つビデオに尊重される。

動画リンク例

ビデオリストの作成は、ビデオリンクがyoutubeyoutubevideolistのサービスを利用して、その場でプレイリストを作成することができます。

サービスを定義しても、ビデオのリストが提供されれば、システムはYouTubeを使用します。
<evlplayer w="width" h="height" class="class" style="style" id="example-player">デフォルトコンテンツ</evlplayer>
{{#evl:21X5lGlDOfg|NASA Live|1|player=example-player}}
{{#evl:lEyCq2KRZik|IIS Q&A|2|player=example-player}}
{{#evl:OLeWbRdW6rY|Space Station Tour|3|player=example-player}}

サポートされるサービス

バージョン2.x以降、EmbedVideoは以下のサービスからのビデオコンテンツの埋め込みに対応しています。

サイト サービス名(複数可) IDの例 URLの例(複数可) 備考
Archive.org 動画 archiveorg electricsheep-flock-244-80000-6 https://archive.org/embed/electricsheep-flock-244-80000-6
Bambuser bambuser 5262334 http://bambuser.com/v/5262334 放送
bambuser_channel チャンネル
Beam beam RocketBear https://beam.pro/RocketBear ストリーム
Bing bing 31ncp9r7l http://www.bing.com/videos/watch/video/adorable-cats-attempt-to-eat-invisible-tuna/31ncp9r7l
Blip.tv blip http://blip.tv/vinylrewind/review-6864612 Blipは動画ページの完全なURLを必要とし、IDだけは受け付けません。
C3TV mediacccde 32c3-7305-quantum_cryptography https://media.ccc.de/v/32c3-7305-quantum_cryptography
CollegeHumor collegehumor 6875289 http://www.collegehumor.com/video/6875289/batman-says-his-goodbyes
Dailymotion dailymotion x1adiiw_archer-waking-up-as-h-jon-benjamin_shortfilms http://www.dailymotion.com/video/x1adiiw_archer-waking-up-as-h-jon-benjamin_shortfilms
Daum TVPot tvpot — シェアメニューのURLからURLまたはIDを取得する。 s9011HdLzYwpLwBodQzCHRB http://tvpot.daum.net/v/s9011HdLzYwpLwBodQzCHRB
Div Share divshare
Edutopia EdutopiaのコンテンツはYouTubeに移行しました。 下記のYouTubeサービスセレクターをご利用ください。
FunnyOrDie funnyordie c61fb67ac9 http://www.funnyordie.com/videos/c61fb67ac9/to-catch-a-predator-elastic-heart-edition
Gfycat gfycat BruisedSilentAntarcticfurseal http://www.gfycat.com/BruisedSilentAntarcticfurseal
Hitbox hitbox Washuu http://www.hitbox.tv/Washuu
JW Player jwplayer cr5d8nbu-8ZpoNmmJ https://content.jwplatform.com/players/cr5d8nbu-8ZpoNmmJ.html
Kickstarter kickstarter elanlee/exploding-kittens https://www.kickstarter.com/projects/elanlee/exploding-kittens
Metacafe metacafe 11404579 http://www.metacafe.com/watch/11404579/lan_party_far_cry_4/
Nico Nico Video nico sm24394325 http://www.nicovideo.jp/watch/sm24394325
RuTube rutube b698163ccb67498db74d50cb0f22e556 http://rutube.ru/video/b698163ccb67498db74d50cb0f22e556/
SoundCloud soundcloud https://soundcloud.com/skrillex/skrillex-rick-ross-purple-lamborghini SoundCloudは完全なURLを必要とします。
TeacherTube teachertube 370511 http://www.teachertube.com/video/thats-a-noun-sing-along-hd-version-370511
TED Talks ted bruce_aylward_humanity_vs_ebola_the_winning_strategies_in_a_terrifying_war http://www.ted.com/talks/bruce_aylward_humanity_vs_ebola_the_winning_strategies_in_a_terrifying_war
Tubi TV tubitv 318409 http://tubitv.com/video/318409
Tudou tudou mfQXfumwiew http://www.tudou.com/listplay/mfQXfumwiew.html
Twitch twitch twitchplayspokemon http://www.twitch.tv/twitchplayspokemon ライブ配信
twitchvod アーカイブスビデオオンデマンド
Videomaten videomaten
Vimeo vimeo 105035718 http://vimeo.com/105035718
Vine vine h2B7WMtuX2t https://vine.co/v/h2B7WMtuX2t
Yahoo Screen (Archived 2013-09-20 at the Wayback Machine) yahoo katy-perry-dances-sharks-2015-024409668 https://screen.yahoo.com/videos-for-you/katy-perry-dances-sharks-2015-024409668.html
YouTube youtube pSsYTj9kCHE https://www.youtube.com/watch?v=pSsYTj9kCHE シングル動画
youtubeplaylist https://www.youtube.com/watch?v=CW_PbErQ_c8&list=PL76E80C7F756A2047 プレイリスト
youtubevideolist https://www.youtube.com/watch?v=CW_PbErQ_c8&playlist=CW_PbErQ_c8,CW_PbErQ_c8 動画リスト
Youku youku XODc3NDgzMTY4 http://v.youku.com/v_show/id_XODc3NDgzMTY4.html

インストール

  • ダウンロードして、ファイルをextensions/フォルダー内のEmbedVideoという名前のディレクトリ内に配置します。
  • 以下のコードを LocalSettings.php の末尾に追加します:
    wfLoadExtension( 'EmbedVideo' );
    
  • 必要に応じて設定します
  • Yes 完了 – ウィキの「Special:Version」に移動して、拡張機能が正しくインストールされたことを確認します。

設定

変数 既定値 種類 説明
$wgEmbedVideoAddFileExtensions true 真偽値 アップロード可能なファイルのリストに、ビデオ/オーディオファイルの拡張子を追加することを有効または無効にします。
$wgEmbedVideoEnableVideoHandler true 真偽値 記事に埋め込まれたビデオを表示するためのビデオメディアハンドラを有効または無効にします。
$wgEmbedVideoEnableAudioHandler true 真偽値 記事に埋め込まれた音声を表示するための音声メディアハンドラの有効・無効を設定します。
$wgEmbedVideoDefaultWidth '' 整数 動画プレーヤーのデフォルトの幅をグローバルにオーバーライドします。 設定しない場合、ビデオサービスのデフォルトの幅(通常640ピクセル)が使用されます。
$wgEmbedVideoMinWidth '' 整数 ビデオプレーヤーの最小幅。 この値以下で指定された幅は、自動的にこの値にバインドされる。
$wgEmbedVideoMaxWidth '' 整数 ビデオプレーヤーの最大幅。 この値以上に指定された幅は、自動的にこの値にバインドされる。
$wgFFmpegLocation '/usr/bin/ffmpeg' 文字列 ffmpegバイナリの位置を設定する。
$wgFFprobeLocation '/usr/bin/ffprobe' 文字列 ffprobeバイナリの位置を設定する。

バージョン履歴

v2.9.0
  • Fix stored XSS in AudioTransformOutput and VideoTransformOutput.
  • Fix autoResize on mobile.
  • Fix video caption escaping the container.
  • Handle multiple video sizes per page in resize.
  • Move beam service to mixer.
  • Add a default link title for #evl/#vlink.
  • Add spotify playlist embeds.
  • Add facebook video embeds.
  • Fix centering of videos.
  • Add Microsoft Stream service.
  • Add title to iframes.
  • Add API help messages for 1.33 compatibility.
  • Fix static analysis issues.
  • Fix Twitch embeds.
v2.8.0
  • Renamed hitbox.tv to smashcast.tv.
  • Updated Nico Video embed code.
  • Added support for Twitch clips.
  • Fix issues with Twitch VODs.
  • Removed unused $wgFFmpegLocation that was interferring with TimedMediaHandler.
  • Added Polish translation.
v2.7.4
  • Added support for playlist to evlplayer
  • Added support for youtube video list
  • Updated Documentation for evlplayer
  • Added missing dependency for evlplayer in extension.json
v2.7.3
  • Default Twitch VOD to autoplay=false by default
  • Allow videos to be sized in 1:1 aspect ratios for special use cases.
v2.7.2
  • Added feature to evlplayer to allow default video content
v2.7.1
  • Fixed issue with youku videos not embedding properly on https enabled wikis.
v2.7.0
  • Added SoundCloud support
  • Added ability to use service name as a parser tag (if not defined previously)
v2.6.1

開発者向け注記

ビデオクリップのインジェクション機構として(拡張タグではなく)パーサ関数を使用する主な利点は、パーサ関数が({{{1}}}形式の)テンプレートパラメータを利用できることです。 例えば、YouTubeの動画をサムネイルサイズで、画像のように右寄せでたくさん作っていることに気づいたとします。 Template:Youtube_tn というテンプレートを作って、これを入れることができるかもしれません。

<div class="thumb tright">
{{#ev:youtube|{{{1}}}|{{{2|100}}}}}
</div>

そして、このように呼び出すのです。

{{youtube tn|someYoutubeId}}

バグ報告

GitLabプロジェクトページにイシュー・トラッカーが設置されています。

貢献する

バグレポート、機能リクエスト、パッチはいつでも歓迎します。 十分な関心があれば、GitLabプロジェクトに新しい貢献者を追加することができます。

関連項目

  • EmbedVideoのフォーク — この拡張機能の、よりプライバシーを重視したバージョンです。 なお、YouTube、Spotify、Vimeo、Archive.orgのみ対応していますが、新しいサービスはGitHubからリクエストすることが可能です。 さらに、#ev以外のすべてのパーサー関数と、‎<embedvideo>‎<youtube>などのパーサータグが削除されます。[1]

外部リンク

脚注