HTML動画
HTMLビデオ要素について
概要： HTMLビデオ要素 は、コンバージョン率を高めるためにページをより魅力的にすることを目的としています。この要素を使用して、Webサイトやブログでビデオを共有できます。
詳細な手順に進む前に、以下のビデオをご覧ください。
HTMLビデオ要素へのアクセス方法
HTMLビデオ要素は、左側ツールバーの要素アイコンをクリックすることで見つけられます。
ステップ1: 要素リストを開くために要素アイコンをクリックします
ステップ2: PageFlyの要素タブで、「HTMLビデオ」をクリックします
ステップ3: 要素をページエディターにドラッグアンドドロップします
HTMLビデオ要素の設定方法
この要素には、コンテンツの外観を細かく調整して可能な限り最高のコンバージョン率を達成するためのさまざまなパラメータが豊富に備わっています。
ページに追加したHTMLビデオ要素を選択し、「General」タブと「Styling」タブに移動して設定にアクセスします。
重要な注意：
ファイルサイズは10MB未満である必要があります。
サポートされているビデオ形式には、MP4、WebM、Oggが含まれます。
一般設定
全体設定については、「General」タブに移動します。HTMLビデオ要素の主な設定を以下に示します。表示、属性、およびアニメーション設定の詳細については、こちらのガイドを参照してください。
HTMLビデオソース
ビデオをアップロードしたり、再選択ボタンをクリックしてURLを埋め込んだりできます。
コンピューターからビデオを追加
「ビデオを選択」ボタンをクリックし、次に「ビデオを追加」ボタンをクリックするか、点線領域にビデオをドラッグアンドドロップできます。
URLからビデオを追加
URLからビデオを追加するには、Shopifyの左ナビゲーションでコンテンツ > ファイルに進み、リンクボタンをクリックしてリンクをコピーします。
次に、PageFlyエディターでビデオを選択 > URLから追加をクリックし、「Video URL」にURLを貼り付けてビデオを追加します。
メディアファイルからビデオを追加
URLアイコンの横にある「メディアファイル」オプションをクリックすると、利用可能なビデオのリストが表示されます。
要素からビデオファイルまたはURLを削除したい場合は、ここにある「クリア」ボタンをクリックするだけで、この要素に対して別のビデオを選択できます。
コントロールを表示
このオプションを選択または選択解除することで、ビデオプレイヤーコントロールを表示または非表示にすることができます。
ループを有効にする
このパラメータをオンにすると、ビデオはループで常にノンストップで再生されます。この機能はライブビューで確認できます。
オートプレイを有効にする
このパラメータを選択または選択解除することで、オートプレイ機能をオン/オフできます。
オートプレイ機能は、以下の場合には動作しない可能性があることに注意してください。
ユーザーがブラウザを構成してその動作を防いでいるか、「ビデオをミュート」パラメータがオフになっている場合。
ユーザーが低電力モードのiPhoneを使用し、SafariブラウザでWebサイトにアクセスする場合、オートプレイ機能はアクティブになりません。
ビデオをミュート
「はい」または「いいえ」を切り替えて、ビデオの音をオフにします。
コンテンツの読み込み
以下の2つのオプションで、ビデオの読み込み方法をカスタマイズできます。
遅延読み込み：ビデオはユーザーの画面に表示されたときにのみ読み込まれ、帯域幅を節約し、初期ページ読み込みを高速化します。
標準：ページが開いたときにすべてのビデオがすぐに読み込まれ、すべてがすぐに準備されます。この設定はユーザーエクスペリエンスを向上させます。
カバー画像ソース
「画像を選択」をクリックして、ビデオのサムネイルカバーとして画像を設定し、目的の画像を選択して「完了」をクリックします。
画像品質
これにより、さまざまなデバイスで画像品質をカスタマイズし、パフォーマンスを最適化するのに役立つさまざまな値が得られます。各値は、事前に定義されたmin-widthおよびmax-width値に基づいて画像寸法を調整します。
自動 (375px - 2048px)
オリジナル (original size): 元の品質を維持します
サムネイル: 375px
低 (375px - 550px)
中 (375px-1280px)
高 (375px-1920px)
非常に高 (375px-2560px)
超 (375px-3840px)
カバー画像の読み込み
ストアの読み込み速度を向上させるには、以下の「カバー画像の読み込み」オプションのいずれかを選択します。
遅延読み込み：表示されたときにのみ画像を読み込み、初期読み込み時間を改善します。
事前読み込み：画像を早期に読み込み、より速く利用できるようにします。
標準：他のコンテンツと一緒に画像を通常通り読み込みます。
スタイル設定
「Styling」タブに移動して、HTMLビデオ要素の外観をカスタマイズします。このタブの設定に関する詳細については、要素スタイル設定ガイドを参照してください。
使用例
コンテナの中央にHTMLビデオを配置する
HTMLをコンテナの中央に配置したい場合は、「スタイリング > 間隔 > パディング」に移動し、中央マージンに数値を入力します。数値が大きいほど、ビデオの周囲のスペースは大きくなります。
HTMLビデオに枠線を追加する
HTMLを他の要素から目立たせるには、枠線を追加してより目立つ端を与えます。3つのデフォルトの枠線スタイルがあります。
| 実線 |
点線
破線
よくある質問
1. HTMLビデオの最大ファイルサイズはいくつですか？
HTMLビデオの最大ファイルサイズは10MBです。
2. HTMLビデオでサポートされている形式は何ですか？
サポートされているビデオ形式には、MP4、WebM、Oggが含まれます。
3. HTMLビデオとは何ですか？
HTMLビデオ要素は、コンバージョン率を高めるためにページをより魅力的にすることを目的としています。この要素を使用して、Webサイトやブログでビデオを共有できます。
4. HTMLビデオ要素とYouTube要素の違いは何ですか？
このビデオ要素を使用すると、YouTubeアカウントなしでWebサイトにビデオをアップロードして使用できます。ただし、ビデオがスムーズに再生され、Webサイトが迅速に読み込まれるように、ファイルサイズの制限があります。
5. HTMLビデオを使用するためのベストプラクティスは何ですか？
製品やブランドに関連する高品質のビデオを使用します。
より広いブラウザ互換性と再生の成功を確保するために、ビデオを複数の形式（例：MP4、WebM）で提供することを検討します。
読み込み時間を高速化するために、ビデオファイルを最適化します。大きなビデオファイルはWebサイトの速度を低下させ、ユーザーエクスペリエンスとSEOに影響を与える可能性があります。
その他のリソース
Last updated
Was this helpful?