Embedding Videos in Web Content Articles on DXP 7.0

This reference article describes the several different ways to embed videos in Web Content Articles in Liferay DXP 7.0. It is designed to supplement Liferay's Official Documentation on Publishing Web Content and optimizing your content using structures and templates. まずはそれらの記事を読んで、基本的なことを学んだ方がいいかもしれません。

ビデオを埋め込む方法

  1. Use Case #1: Embedding Youtube and Other Streaming Videos
  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. Enter a title in the Title field (e.g. Piano Guys - Over the Rainbow).
  6. 右端の フォーマット アイコンをクリックします。
  7. テキストフィールドに埋め込みコードを貼り付けます。
  8. をクリックして、を発行します。

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

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

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

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

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

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

  1. コンテンツ → ドキュメントとメディアに移動します。
  2. 動画のタイトルをクリックしてください。
  3. 右上の 情報 アイコンをクリックします。 これは、 の詳細 タブを展開します。
  4. をクリックしてURLを取得.
    embedding-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. をクリックして、を発行します。

Follow the same steps as above to display the Web Content article on the Page.
embedding-videos03.png
For more advanced features, consider adding Javascript for more features such as Play/Pause and changing the size of the video. 

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

先ほどの例では、ブラウザがHTML5 Videoに対応しているかどうかが制限になっています。 To make this scalable for multiple articles, create a structure and its corresponding template based on your specific needs and design.

追加情報

リファレンス:

There are several references for consultation; some of them are from Liferay's Official Documentation and others are from third parties. Liferay does not support or endorse these third party documentation. Please take care when implementing them.

公式書類

Third Party Documentation

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