<h1 id="%E6%A6%82%E8%A6%81" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 概要</h1>
<p data-line="2" class="code-line">UMGで動画を再生する方法がわからず、色々と調べたことを備忘録も兼ねてやり方をまとめて記事にしました。</p>
<p data-line="4" class="code-line">下記のようなイメージをしてます。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__e9ded42778765" src="https://embed.zenn.studio/tweet#zenn-embedded__e9ded42778765" data-content="https%3A%2F%2Fx.com%2Fdaria_nicht%2Fstatus%2F1852925492812296208" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://x.com/daria_nicht/status/1852925492812296208" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://x.com/daria_nicht/status/1852925492812296208</a></p>
<h1 id="%E4%B8%8B%E6%BA%96%E5%82%99" data-line="7" class="code-line">
<a class="header-anchor-link" href="#%E4%B8%8B%E6%BA%96%E5%82%99" aria-hidden="true"></a> 下準備</h1>
<p data-line="8" class="code-line">まず下準備として以下のものが必要になるので用意します。</p>
<ul data-line="9" class="code-line">
<li data-line="9" class="code-line">
<code>MediaPlayer</code>ファイル</li>
<li data-line="10" class="code-line">動画を流す先のテクスチャ</li>
<li data-line="11" class="code-line">動画を流す先のマテリアル</li>
</ul>
<h2 id="mediaplayer" data-line="13" class="code-line">
<a class="header-anchor-link" href="#mediaplayer" aria-hidden="true"></a> MediaPlayer</h2>
<p data-line="14" class="code-line"><code>MediaPlayer</code>の作り方は以下になります。</p>
<ol data-line="15" class="code-line">
<li data-line="15" class="code-line">作り方はコンテンツブラウザ上で右クリック</li>
<li data-line="16" class="code-line">「メディア」→「メディアプレーヤー」を洗濯。</li>
</ol>
<p data-line="18" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--_Enybl6v--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/4b43e85cce7bd8f9ac11ae19.png%3Fsha%3D7cb90ede964a7db3c7881d44968ea1ef2bc65faf" loading="lazy" class="md-img"></p>
<p data-line="20" class="code-line">このときダイアログが出てきますがチェックを入れた方がTextureも一緒に作ってくれるのでおすすめです。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--DfhurwU8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/16947be1e3d9d24c61749693.png%3Fsha%3Dc1f519ed1e79a5ea9dd73b87701671e9bad8fe11" loading="lazy" class="md-img"></p>
<p data-line="23" class="code-line">動画再生終了時に自動でループ再生したい方は 作成した<code>MediaPlayer</code>ファイルを開くと<code>Loop</code>というフラグにチェックを付けるとループ再生されます。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--huOiSlYm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/c71f81b3cb88dff5c8f6bad2.png%3Fsha%3D48a4e84428fc5cf564a25f0e7aa55b494113393d" loading="lazy" class="md-img"></p>
<h2 id="%E5%8B%95%E7%94%BB%E3%82%92%E6%B5%81%E3%81%99%E5%85%88%E3%81%AE%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB" data-line="27" class="code-line">
<a class="header-anchor-link" href="#%E5%8B%95%E7%94%BB%E3%82%92%E6%B5%81%E3%81%99%E5%85%88%E3%81%AE%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB" aria-hidden="true"></a> 動画を流す先のマテリアル</h2>
<p data-line="28" class="code-line">先ほどのダイアログでテクスチャを作成したので、テクスチャに対して右クリックしてマテリアルを作成を選択します。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--0yAL-xKc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/e956b0ae6ed8d430fde9d477.png%3Fsha%3D384c46b0288b6d55c05824e81beda630214105ed" loading="lazy" class="md-img"></p>
<p data-line="32" class="code-line">このときにできたマテリアルはUMG用になってないので、マテリアルを開いて<code>MaterialDomain</code>を<code>UserInterface</code>に変更します。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--Ppp2pTEQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/c0ac89633091919a1c7e6976.png%3Fsha%3Db399f9d214b886c09c0e09b2f6efce6c87430d0d" loading="lazy" class="md-img"></p>
<p data-line="35" class="code-line">変更するとマテリアルノードのピンが外れるのでつなぎ直します<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--hbVMFtLd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/2d8a422fd3615e8854d7e692.png%3Fsha%3D804c39cb37cf7890e0bf3ca5bcb3a8fe6d66cf56" loading="lazy" class="md-img"></p>
<p data-line="38" class="code-line">これで必要なものは揃ったのでUMGの作成に移ります</p>
<h1 id="umg%E4%BD%9C%E6%88%90" data-line="40" class="code-line">
<a class="header-anchor-link" href="#umg%E4%BD%9C%E6%88%90" aria-hidden="true"></a> UMG作成</h1>
<p data-line="41" class="code-line">レイアウトは下記の手順で設定します<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--_NzSNk0M--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/3879b4f213594e83483c142b.png%3Fsha%3Dc96d4f9de31fd52f52bd61bbb5b51b19796afb7f" loading="lazy" class="md-img"></p>
<p data-line="44" class="code-line">BPの方は、まず<code>MediaPlayer</code>を格納する変数を作り、先程作ったMediaPlayerを設定します<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--2c4Qcmh2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d959b81434b07242b793e7da.png%3Fsha%3Dc98adf0e5ea6499d348e4ca5002902f386cd6563" loading="lazy" class="md-img"></p>
<p data-line="47" class="code-line">設定したら<code>OpenSource</code>関数に再生したい動画ファイルを設定します<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--wdZYpIyS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/1cccbcffa16b5f455233a327.png%3Fsha%3Db80d3e17773eeac845959011f6c6ad06a54340c7" loading="lazy" class="md-img"></p>
<p data-line="50" class="code-line"><code>MediaPlayer</code>は作られたタイミングで自動で<code>Open On Play</code>というフラグにチェックが入っているため、<code>OpenSource</code>関数を呼んだら自動で再生されるようになっているのでこうしてます。</p>
<p data-line="52" class="code-line">ここまでできたら冒頭のXの動画の様に再生されていれば成功です</p>
<h1 id="%E5%8F%82%E8%80%83" data-line="54" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h1>
<p data-line="55" class="code-line"><a href="https://forums.unrealengine.com/t/how-to-scroll-through-video-via-controll-bar/458364" target="_blank" rel="nofollow noopener noreferrer">Play video texture in UMG</a></p>
<p data-line="58" class="code-line"><a href="https://forums.unrealengine.com/t/play-video-texture-in-umg/458434/3" target="_blank" rel="nofollow noopener noreferrer">How to scroll through video via controll bar?</a></p>


【UE5】UMGで動画ファイルを再生する方法

Discussion