DXP 7.0のウェブコンテンツ記事に動画を埋め込む

この参考記事では、Liferay DXP 7.0のWebコンテンツ記事に動画を埋め込むためのいくつかの異なる方法について説明します。 これは、 Webコンテンツの公開構造とテンプレートを使用したコンテンツの最適化に関するLiferayの公式ドキュメントを補足するために設計されています。 まずはそれらの記事を読んで、基本的なことを学んだ方がいいかもしれません。

ビデオを埋め込む方法

  1. ユースケース1: Youtubeやその他のストリーミング動画を埋め込む
  2. 使用例2: ドキュメントやメディアに保存された動画を埋め込む
  3. ユースケースその3:カスタムWebコンテンツの構造とテンプレート
  4. 参考文献

決議

Youtube動画の埋め込み

Youtubeなどのストリーム動画をWebコンテンツの記事に埋め込むのはとても簡単です。 (注: 以下の説明では、AlloyEditor を選択したテキストエディタを想定しています)

  1. 先に進む前に、URLだけでなく、Youtube(または他のストリーミングサービス)から特定の埋め込みコードをコピーするようにしてください。 普通はこんな感じです。
    <iframe width="560" height="315" src="https://www.youtube.com/embed/jzF_y039slk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe >	On the left side menu, click Content
  2. 左側のメニューで、 コンテンツをクリックします。
  3. Webコンテンツをクリックします。をクリックします。
  4. プラス記号 →基本的なWebコンテンツをクリックします。
  5. タイトル 欄にタイトルを入力します(例:Piano Guys - Over the Rainbow)。
  6. 右端の フォーマット アイコンをクリックします。
  7. テキストフィールドに埋め込みコードを貼り付けます。
  8. をクリックして、を発行します。

次に、新しく作成したWebコンテンツ記事をページに配置します。 記事が表示されるサイトページに移動します。

  1. 追加 ボタンをクリックします。
  2. ページに のWebコンテンツ表示 ポートレットを追加します。
  3. Webコンテンツの選択をクリックして、 リンクを表示させます。
  4. をクリックして、 を選択し、記事を選択します。
  5. 記事名をクリックしてください(例:Piano Guys - Over the Rainbow)。
  6. をクリックして を保存し、設定ウィンドウを閉じます。

埋め込み動画のページになりました。
埋め込み-videos01.png

ドキュメントやメディアに保存された動画を埋め込む

動画が [ドキュメントとメディア] ポートレットに保存されている場合、基本的な Web コンテンツ構造を使用したまま、Web コンテンツ記事に動画を埋め込むことができます。 このメソッドは、 ブラウザがHTML5動画 形式をサポートしていることを前提としています。

はじめに、埋め込みたい動画のURLを探します。

  1. コンテンツ → ドキュメントとメディアに移動します。
  2. 動画のタイトルをクリックしてください。
  3. 右上の 情報 アイコンをクリックします。 これは、 の詳細 タブを展開します。
  4. をクリックしてURLを取得.
    埋め込み-videos02.png
  5. URLをコピーします。 こんな感じです。
    http://localhost:8080/documents/44649/0/2014-01-22+13.11.46.mp4/5d975bca-98f2-cb23-eab0-4de16bbc2902
  6. 次に、Webコンテンツ記事を作成します。
  7. 左側の コンテンツ メニューの下にある ウェブコンテンツ をクリックします。
  8. プラス記号 →基本的なWebコンテンツをクリックします。
  9. 記事のタイトルを入力します。
  10. 右端の フォーマット アイコンをクリックします。
  11. 次のコードスニペットを動画の URL に貼り付けます。
    <!DOCTYPE html>
    <html>
    <body>
    
    <video width="320" height="240" autoplay>
      <source src="http://localhost:8080/documents/44649/0/2014-01-22+13.11.46.mp4/5d975bca-98f2-cb23-eab0-4de16bbc2902" 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>
    
  12. をクリックして、を発行します。

上記と同じ手順で、Webコンテンツの記事をページに表示します。
embedding-videos03.png
より高度な機能には、再生/一時停止や動画のサイズ変更など、より多くの機能のためにJavascriptを追加することを検討してください。

カスタムWebコンテンツの構造とテンプレート

先ほどの例では、ブラウザがHTML5 Videoに対応しているかどうかが制限になっています。 複数の記事に対して拡張性を持たせるために、具体的なニーズやデザインに合わせて構造とそれに対応するテンプレートを作成します。

追加情報

参考文献

相談にはいくつかの参考文献がありますが、その中にはLiferayの公式文書からのものもあれば、第三者からのものもあります。 Liferayは、これらのサードパーティのドキュメントをサポートしたり、推奨したりするものではありません。 実装の際にはご注意ください。

公式文書

サードパーティ文書

この記事は役に立ちましたか?
2人中2人がこの記事が役に立ったと言っています