プレビューアーとしての外部コンポーネント

React コードを追加するには、次の手順を実行します。

1. React アプリを作成します。コードは Content Hub の外部に存在します。この例では、より洗練されたビデオ ビューアーのコードは次のとおりです。

    import "video-react/dist/video-react.css"; // import css
   import React, { useState } from "react";
   import { BigPlayButton, Player } from "video-react";
   function App() {
   const [videoUrl, setVideoUrl] = useState("");
   const [height, setHeight] = useState(window.innerHeight - 112);
   window.addEventListener("initVideoUrl", ((e: CustomEvent) => {
   setVideoUrl(e.detail);
   }) as EventListener);
   if (videoUrl === "") {
   return <span>Loading video ....</span>;
   }
   return (
   <Player playsInline src={videoUrl} fluid={false} height={height}>
   <BigPlayButton position="center" />
   </Player>
   );
   }
   export default App;

   このスクリプトの注目すべきセクションは window.addEventListener("initVideoUrl", ...) で、これはプレビューする URL のレンディションをフェッチします。

2. Webpack を使用して、React アプリを 1 つの JavaScript バンドルにパッケージ化します。

3. JavaScript バンドルを Content Hub にアセットとしてアップロードします。アップロードしたら、パブリック リンクを生成するか、JavaScript バンドルをパブリック サイトまたは CDN に配置します。

4. ページに外部コンポーネントを追加します。

この例では、外部ページ コンポーネントを次のように設定します。

1. [設定] タブで、[コントロール名] を入力します。

2. [リソース] で、JavaScript バンドルの 1 つまたは複数のリンクを入力します。この例では、JavaScript バンドルをアップロードした後に作成したパブリック リンクを使用します。

   

3. [コード] タブで、必要なコードを入力します。この例では、次のコードを入力します。

    const self = this;
   let videoUrl = "";
   
   function dispatchVideoUrlEvent(data) {
   //create and dispatch the event
   var event = new CustomEvent("initVideoUrl", {
   detail: data,
   bubbles: true,
   cancelable: true
   });
   console.log("running initVideoUrl");
   window.dispatchEvent(event);
   }
   
   var entityLoadedSubscription = options.mediator.subscribe("entityLoaded", function (entity) {
   videoUrl = entity.renditions().video_mp4[0].href;
   console.log("entity loaded");
   
   });
   
   // Load styles
   $('<link>')
   .appendTo($('head'))
   .attr({ type: 'text/css', rel: 'stylesheet' })
   .attr('href', 'https://sldemosites.blob.core.windows.net/react-video-preview/2.07c9864b.chunk.css');
   $('<link>')
   .appendTo($('head'))
   .attr({ type: 'text/css', rel: 'stylesheet' })
   .attr('href', 'https://sldemosites.blob.core.windows.net/react-video-preview/main.6dea0f05.chunk.css');
   
   // Load scripts
   $.when(
   $.getScript("https://sldemosites.blob.core.windows.net/react-video-preview/2.b0c9fd2b.chunk.js"),
   $.getScript("https://sldemosites.blob.core.windows.net/react-video-preview/main.ab32c8cc.chunk.js"),
   $.getScript("https://sldemosites.blob.core.windows.net/react-video-preview/runtime-main.7d027fb5.js"), $.Deferred(function (deferred) {
   $(deferred.resolve);
   })
   ).done(function () {
   console.log("script has loaded");
   console.log(videoUrl);
   dispatchVideoUrlEvent(videoUrl);
   });

   このスクリプトの重要なセクションは次のとおりです。

   • //Load scripts: 外部 React アプリのバンドル ファイルへのパスを提供します。

   • //Create and dispatch events: レンディション URL を外部 React アプリに渡す方法を定義します。

4. [テンプレート] タブで、必要なテンプレートを入力します。この例では、次を使用します。

   <div id="root"></div>

5. [保存] をクリックします。

[アセットの詳細] ページに移動すると、React アプリを使用するビデオ プレビューアーがあることがわかります。