この参考記事では、Liferay Digital Experience Platform 7.1のWebコンテンツ記事に動画を埋め込む方法について説明します。 これは、 Webコンテンツの公開 や 構造とテンプレートを使用したコンテンツの最適化に関するLiferayの公式ドキュメントを補足するために設計されています。 まずはそれらの記事を読んで、基本的なことを学んだ方がいいかもしれません。
ビデオを埋め込む方法
決議
Youtube動画の埋め込み
Youtubeなどのストリーム動画をWebコンテンツの記事に埋め込むのはとても簡単です。 (注: 以下の説明では、AlloyEditor を選択したテキストエディタを想定しています)
- 先に進む前に、URLだけでなく、Youtube（または他のストリーミングサービス）から特定の埋め込みコードをコピーするようにしてください。 普通はこんな感じです。
<iframe width="560" height="315" src="https://www.youtube.com/embed/jzF_y039slk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe >
- 左側のメニューで、 コンテンツ ( DXP 7.2ではコンテンツ & データ )をクリックします。
- Webコンテンツをクリックします。をクリックします。
- プラス記号 →基本的なWebコンテンツをクリックします。
- タイトル 欄にタイトルを入力します（例：The Piano Guys - Over the Rainbow）。
- 右端の コードビュー アイコンをクリックします。
- テキストフィールドに埋め込みコードを貼り付けます。
- をクリックして、を発行します。
次に、新しく作成したWebコンテンツ記事をページに配置します。 記事が表示されるサイトページに移動します。
- 追加 ボタンをクリックします。
- ページに のWebコンテンツ表示 ポートレットを追加します。
- Webコンテンツの選択をクリックして、 リンクを表示させます。
- をクリックして、 を選択し、記事を選択します。
- 記事名をクリックしてください（例：Piano Guys - Over the Rainbow）。
- をクリックして を保存し、設定ウィンドウを閉じます。
埋め込み動画のページになりました。
それはVimeoなどの他のストリーミングビデオプラットフォームでは異なりますが、基本的な原則は同じです。 Vimeoの場合は、このような埋め込みコードを取得します。
<iframe src="https://player.vimeo.com/video/266878736" width="640" height="270" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/266878736">PROTEUS</a> from <a href="https://vimeo.com/user84342633">Floating House VFX</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
それをコピーしてテキストエディタのフィールドに貼り付けます。 この時点で、Vimeoの動画はWebコンテンツの記事に埋め込まれます。
ドキュメントやメディアに保存された動画を埋め込む
動画が [ドキュメントとメディア] ポートレットに保存されている場合、基本的な Web コンテンツ構造を使用したまま、Web コンテンツ記事に動画を埋め込むことができます。 このメソッドは、 ブラウザがHTML5動画 形式をサポートしていることを前提としています。
はじめに、埋め込みたい動画のURLを探します。
- コンテンツ ( DXP 7.2 のコンテンツ & データ )→ ドキュメントとメディアに移動します。
- 動画のタイトルをクリックしてください。
- 右上の 情報 アイコンをクリックします。 これは、 の詳細 タブを展開します。
-
をクリックしてURLを取得.
- URLをコピーします。 こんな感じです。
http://localhost:8080/documents/34548/0/2016-09-30+09.10.30.mp4/ca4e8789-fada-c6a1-aae0-c609d2664715
- 次に、Webコンテンツ記事を作成します。
- 左側の コンテンツ メニューの ウェブコンテンツ をクリックします（DXP 7.2ではコンテンツ & データ ）。
- プラス記号 →基本的なWebコンテンツをクリックします。
- 記事のタイトルを入力します。
- 右端の コードビュー アイコンをクリックします。
- 次のコードスニペットを動画の URL に貼り付けます。
<!DOCTYPE html> <html> <body> <video width="320" height="240" autoplay> <source src="http://localhost:8080/documents/34548/0/2016-09-30+09.10.30.mp4/ca4e8789-fada-c6a1-aae0-c609d2664715" type="video/mp4"> Your browser does not support the video tag. </video> <p><b>Note:</b> The autoplay attribute does not work on some mobile devices.</p> </body> </html>
- をクリックして、を発行します。
上記と同じ手順で、Webコンテンツの記事をページに表示します。
より高度な機能には、再生/一時停止や動画のサイズ変更など、より多くの機能のためにJavascriptを追加することを検討してください。
カスタムWebコンテンツの構造とテンプレート
先ほどの例では、ブラウザがHTML5 Videoに対応しているかどうかが制限になっています。 複数の記事に対して拡張性を持たせるために、構造体とそれに対応するテンプレートを作成します。 Liferay独自のWebデザインチームをベースにした例を提供しており、各ユーザーのニーズに応じて修正する必要があります。
- 構造は、ここに を見つけることができます.
- テンプレートはここにあります .
この概念実証はLiferay Portal 6.2をベースにしているため、Liferay Digital Experience Platform 7.x用にアップデートする必要があります。