Skip to content

カスタムHTMLアプリ内メッセージでの動画

この記事は、従来のエディターのカスタムHTMLメッセージに適用されます。

動画の埋め込み

HTMLアプリ内メッセージで動画を再生するには、以下の <video> 要素をHTMLに含め、動画名をファイル名（またはリモートアセットのURL）に置き換えてください。その他の <video> オプションについては、MDN Web Docsを参照してください。

1
2
3
4
5

<video class="video" autoplay muted playsinline controls>
  <source src="https://video-provider.com/YOUR_VIDEO_FILE.mp4" type="video/mp4">
  <source src="https://video-provider.com/YOUR_VIDEO_FILE.ogg" type="video/ogg">
  Your device does not support playing this video.
</video>

ローカルの動画アセットを使用する場合は、Campaignにアセットをアップロードする際にこのファイルを含めてください。

Androidに関する考慮事項

Androidでは、HTMLアプリ内メッセージに動画やその他のHTML5コンテンツを埋め込むために、アプリ内メッセージが表示されるActivityでハードウェアアクセラレーションを有効にする必要があります。詳細については、Android開発者ガイドを参照してください。

自動再生: ハードウェアアクセラレーションが有効であっても、Android WebViewではメディア再生を開始するためにユーザージェスチャーが必要になる場合があります。自動再生が必要な場合は、HTMLアプリ内メッセージのレンダリングに使用されるWebViewでWebSettings.setMediaPlaybackRequiresUserGesture(false)を設定して、ユーザージェスチャー要件を無効にしてください。これにはHTMLアプリ内メッセージの表示方法に対するSDKレベルのカスタマイズが必要です。セットアップガイダンスについては、Braze SDKのアプリ内メッセージをカスタマイズするを参照してください。

iOSに関する考慮事項

iOSデバイスをサポートするには:

  • フルスクリーン再生はサポートされていないため、playsinline 属性を含める必要があります。
  • iOSでは自動再生が保証されません。iOSの再生動作は WKWebView とOSレベルのメディアポリシーに依存しており、autoplay と muted が設定されていてもユーザージェスチャーが必要になる場合があります。ターゲットのiOSバージョンとデバイスでHTMLアプリ内メッセージをテストしてください。

自動再生が必要で、テストによりデフォルトでは動作しないことが判明した場合は、HTMLアプリ内メッセージで使用される WKWebViewConfiguration をカスタマイズして、メディア再生のユーザーアクション要件を調整できます。たとえば、mediaTypesRequiringUserActionForPlayback プロパティを設定します。これにはSDKレベルのカスタマイズが必要です。Swiftリソースについては、Braze SDKのアプリ内メッセージをカスタマイズするおよびSwiftのWebViewにBraze JavaScriptインターフェイスを追加するを参照してください。

Webに関する考慮事項

最新のブラウザのほとんどは、特定の条件下（一般的に動画がミュートされている場合）でのみ自動再生を許可しています。Webアプリ内メッセージで autoplay を使用する場合は、muted を含め、サポートするブラウザとデバイスでテストしてください。ブラウザのポリシーは異なり、場合によってはユーザージェスチャーが必要になることがあります。

Webアプリ内メッセージでYouTube動画を自動再生するには、URLパラメーター &autoplay=1 を追加します。たとえば、以下の動画は自動再生され、ミュートされ（&mute=1）、コントロールが非表示になります（&controls=0）:

1

<iframe class="video" src="https://www.youtube.com/embed/VPIPAc4oQqw?autoplay=1&mute=1&controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

YouTube動画の表示方法

  • YouTube埋め込みのアプリ内メッセージは、プラットフォームに応じて、アプリ内に直接表示されるか、アプリ内の別のタブに表示されます。
  • YouTube埋め込みが表示されている場合、アプリ内メッセージのテキストが表示されないことがあります。

トラブルシューティング

アプリ内メッセージに動画が表示されない場合:

  • URLが有効であることを確認してください。
  • type="video/mp4" 宣言が欠落していないことを確認してください（YouTube以外の動画の場合）。
  • 不足している閉じタグを追加し、タイプミスを修正してください。
New Stuff!