動画埋め込みセクション【最新版 】

完成系↑↑

今回の記事では動画埋め込みセクションについて解説します！

動画ファイル用のschema「"type": "video"」を使ってます！

今まで動画の埋め込みセクションを作る際は「"type": "url"」を使って実装していましたが
（こちらの記事でもURLを使った実装を紹介しています）

「"type": "video"」の方が「"type": "url"」より動画に適していると思い記事にしました！

動画埋め込みセクションのコード

<div class="page-width schema-list scroll-trigger animate--slide-in">
{{
    section.settings.video
    | video_tag:
        image_size: '1100x',
        loop: true,
        controls: false,
        autoplay: true,
        muted: true,
        width: "560", 
        height: "315"
}}
</div>

{% schema %}
{
    "name": "動画埋め込みセクション",
    "settings": [
        {
            "type": "video",
            "id": "video",
            "label": "ビデオ"
        }
    ],
    "presets":[
        {
            "name" : "動画埋め込みセクション",
            "category": "カスタムパーツ"
        }
    ]
}
{% endschema %}
    

コードの解説

スキーマ（"type": "video"）の書き方

{
    "type": "video",
    "id": "video",
    "label": "ビデオ"
},

「"type": "video_url"」とは違うの注意してください

videoを選択する

カスタマイズ画面にてファイルのアップロードと選択が可能！

選択したビデオのvideoオブジェクトを取得できます。
もし何も選択されていない場合はnilを返します（動画ファイルじゃない場合も）

フィルター（video_tag）を使って出力

{{
    section.settings.video
    | video_tag:
        image_size: '1100x',
        loop: true,
        controls: false,
        autoplay: true,
        muted: true,
        width: '560', 
        height: '315',
        class: 'custom-class'
}}

指定された動画をvideo_tagフィルターを使って HTML<video>タグを生成しています

• image_size: ポスター画像のサイズを指定します。指定しない場合、デフォルトで100x100になります。
• loop: 動画をループ再生するための属性です。ループ再生したい場合に loop 属性を追加します。
• controls: メディアプレーヤーのコントロール（再生・一時停止・音量調整など）を表示するかどうかを指定します。
• autoplay: ページが読み込まれたら自動的に動画を再生するための属性です。
• muted: 動画の音声をミュートにするための属性です。
• width: 動画の横幅を指定します（ピクセル単位）。
• height: 動画の高さを指定します（ピクセル単位）。

生成されたコード↓↓

<video> 
    playsinline="playsinline" 
    loop="loop" 
    autoplay="autoplay" 
    muted="muted" 
    width="560" 
    height="315" 
    preload="metadata" 
    poster="//〇〇.myshopify.com/cdn/shop/files/preview_images/〇〇.thumbnail.0000000000_1100x.jpg?v=1678116246">
    <source 
    src="https://cdn.shopify.com/videos/c/vp/〇〇/〇〇.HD-1080p-7.2Mbps-12872856.mp4" 
    type="video/mp4">
    <img src="//〇〇.myshopify.com/cdn/shop/files/preview_images/〇〇.thumbnail.0000000000_1100x.jpg?v=1678116246">
</video>

ポスター画像を同時に出力してくれるので非常に便利です！

動画のURLを取得したい

{{section.settings.video.sources[1].url}}

ビデオのvideo_sourceオブジェクトにアクセスしてあげるとurlが取得できます！

<video src="{{section.settings.video.sources[1].url}}" loop muted playsinline autoplay> </video>  

動画のURLさえわかれば上記コードでも動画を出力できます

各種参考サイトリンク

videoスキーマ
videoオブジェクト
video_tagフィルター

まとめ

urlを使った出力

videoを使った出力

どうでしょう？
videoスキーマを使うとURLを使って表示させるより手順も省けておすすめです！！
運用側からしたら少しでも手間が省けた方がいいですよね！

ビデオの出力方法さえわかればあとはcssで装飾していくだけですので
使う際はこの記事を参考にしていただけると嬉しいです！