📘 公式リファレンス📦 リファレンス/オブジェクト中級

video_source オブジェクト

動画メディアのソースファイルに関する情報を保持するオブジェクト。ファイル形式、寸法、MIME タイプ、CDN URL などを提供する。

用途

商品ページの動画メディアで複数の形式（mp4、m3u8、mov）を出し分けたり、動画プレイヤーに最適なソースを選択したいとき。

設置場所

Liquid テンプレート内で `{{ product.media[i].sources[j].format }}` のように `video_source` オブジェクトのプロパティを参照する。動画プレイヤーの `<source>` タグの `src`、`type` 属性に値を入れるときに使う。

注意点

mp4 動画をアップロードすると Shopify が自動的に m3u8 ファイルを追加生成するため、ブラウザの接続速度に応じた HTTP ライブストリーミング（HLS）配信が可能になる。ただし m3u8 は Safari など限定ブラウザでの再生が前提のため、クロスブラウザ対応が必要なときは mp4 と m3u8 の両方を `<source>` タグで列挙して、ブラウザの対応形式を自動選択させるとよい。

タグ:videomediasourcehlsstreaming

仕様

118 行 / json

{
  "access": {
    "global": false,
    "parents": [
      {
        "object": "video",
        "property": "sources"
      }
    ],
    "template": []
  },
  "deprecated": false,
  "deprecation_reason": "",
  "description": "",
  "properties": [
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "number",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The width of the video source file.",
      "name": "width"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "&gt; Note:\n&gt; When mp4 videos are uploaded, Shopify generates an m3u8 file as an additional video source. An m3u8 file enables video\n&gt; players to leverage HTTP live streaming (HLS), resulting in an optimized video experience based on the user's internet\n&gt; connection.",
      "examples": [],
      "return_type": [
        {
          "type": "string",
          "name": "mov",
          "description": "",
          "array_value": ""
        },
        {
          "type": "string",
          "name": "mp4",
          "description": "",
          "array_value": ""
        },
        {
          "type": "string",
          "name": "m3u8",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The format of the video source file.",
      "name": "format"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "number",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The height of the video source file.",
      "name": "height"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "string",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) of the video source file.",
      "name": "mime_type"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "string",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The [CDN URL](/themes/best-practices/performance/platform#shopify-cdn) of the video source file.",
      "name": "url"
    }
  ],
  "summary": "Information about the source files for a video.",
  "name": "video_source",
  "examples": [],
  "json_data": {
    "path": "/products/potion-beats",
    "handle": "product.media[1].sources[1]",
    "data_from_file": ""
  },
  "return_type": []
}

出典・ライセンス

Source:: Shopify/theme-liquid-docs/data/objects.json
Repository:: https://github.com/Shopify/theme-liquid-docs
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

video_source オブジェクト

仕様

出典・ライセンス

関連項目

content_for_header オブジェクト

metaobjects オブジェクト

additional_checkout_buttons オブジェクト

canonical_url オブジェクト

content_for_index オブジェクト

content_for_additional_checkout_buttons オブジェクト