1. Liferay Help Center
  2. ナレッジベース
  3. ハウツー

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

Avatar

Justin Choi

  • 更新

この参考記事では、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. 左側コンテンツ メニューの下にあるWebコンテンツ をクリックします
  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人がこの記事が役に立ったと言っています