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

このリファレンス記事では、Liferay DXP 7.0のWebコンテンツ記事にビデオを埋め込むいくつかの異なる方法について説明します。上Liferayの公式ドキュメントを補完するように設計されて の公開Webコンテンツ と使用してコンテンツの最適化 の構造とテンプレート。 最初にこれらの記事を読んで、基本的な原則を学ぶことをお勧めします。

ビデオを埋め込む方法

  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 Contentをクリックし
  4. プラス記号 →基本Webコンテンツをクリックし
  5. タイトルを Title フィールドに入力します(例:Piano Guys-Over the Rainbow)。
  6. 右端の Format アイコンをクリックします。
  7. 埋め込みコードをテキストフィールドに貼り付けます。
  8. 公開クリックし

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

  1. Add ボタンをクリックします。
  2. Web Content Display ポートレットをページに追加します。
  3. Select Web Contentをクリックして、 リンクを表示します。
  4. Select ボタンをクリックして記事を選択します。
  5. 記事の名前をクリックします(例:Piano Guys-Over the Rainbow)。
  6. Save クリックしてから、Configurationウィンドウを閉じます。

埋め込みビデオがページに表示されます。
embedding-videos01.png

ドキュメントとメディアに保存されたビデオの埋め込み

ビデオがドキュメントとメディアポートレットに保存されている場合は、基本的なWebコンテンツ構造を使用しながら、Webコンテンツの記事にビデオを埋め込むことができます。より複雑なWebコンテンツ構造と対応するテンプレートを作成する必要はありません。 このメソッドは、 ブラウザーがHTML5ビデオ 形式をサポートしていることを前提としています。

まず、埋め込む動画のURLを見つけます。

  1. コンテンツ→ドキュメントとメディアます。
  2. ビデオのタイトルをクリックします。
  3. 右上の Info アイコンをクリックします。 これにより、[ 詳細 ]タブが展開されます。
  4. Get 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. 左側の Content メニューの下にある Web Content クリックします。
  8. プラス記号 →基本Webコンテンツをクリックし
  9. 記事のタイトルを入力します。
  10. 右端の Format アイコンをクリックします。
  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ビデオをサポートするかどうかという制限があります。 複数の記事でこれをスケーラブルにするには、特定のニーズとデザインに基づいて構造とそれに対応するテンプレートを作成します。

追加情報

参考文献

協議にはいくつかの参考文献があります。それらの一部はLiferayの公式ドキュメントからのものであり、その他はサードパーティからのものです。 Liferayは、これらのサードパーティのドキュメントをサポートまたは推奨していません。 実装の際はご注意ください。

公式ドキュメント

サードパーティのドキュメント

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