# Creating a Flex Message including a video

This page explains how to create a flex message including a video. For more information about how to send the created flex message, see Sending Flex Messages.

# Overview

Using a video component of Flex Message, you can display a video in the hero block.

Video component example

The flex message above can be created by the JSON data below:

{
  "type": "bubble",
  "size": "mega",
  "hero": {
    "type": "video",
    "url": "https://example.com/video.mp4",
    "previewUrl": "https://example.com/video_preview.jpg",
    "altContent": {
      "type": "image",
      "size": "full",
      "aspectRatio": "20:13",
      "aspectMode": "cover",
      "url": "https://example.com/image.jpg"
    },
    "aspectRatio": "20:13"
  }
}

Also, unlike a video message, you can build a message with a complex layout including a video.

Video component example

The flex message above can be created by the JSON data below:

{
  "type": "bubble",
  "size": "mega",
  "hero": {
    "type": "video",
    "url": "https://example.com/video.mp4",
    "previewUrl": "https://example.com/video_preview.png",
    "altContent": {
      "type": "image",
      "size": "full",
      "aspectRatio": "20:13",
      "aspectMode": "cover",
      "url": "https://example.com/image.png"
    },
    "action": {
      "type": "uri",
      "label": "More information",
      "uri": "http://linecorp.com/"
    },
    "aspectRatio": "20:13"
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "Brown Cafe",
        "weight": "bold",
        "size": "xl"
      },
      {
        "type": "box",
        "layout": "baseline",
        "margin": "md",
        "contents": [
          {
            "type": "icon",
            "size": "sm",
            "url": "https://example.com/star.png"
          },
          {
            "type": "icon",
            "size": "sm",
            "url": "https://example.com/star.png"
          },
          {
            "type": "icon",
            "size": "sm",
            "url": "https://example.com/star.png"
          },
          {
            "type": "icon",
            "size": "sm",
            "url": "https://example.com/star.png"
          },
          {
            "type": "icon",
            "size": "sm",
            "url": "https://example.com/gray_star.png"
          },
          {
            "type": "text",
            "text": "4.0",
            "size": "sm",
            "color": "#999999",
            "margin": "md",
            "flex": 0
          }
        ]
      },
      {
        "type": "box",
        "layout": "vertical",
        "margin": "lg",
        "spacing": "sm",
        "contents": [
          {
            "type": "box",
            "layout": "baseline",
            "spacing": "sm",
            "contents": [
              {
                "type": "text",
                "text": "Place",
                "color": "#aaaaaa",
                "size": "sm",
                "flex": 1
              },
              {
                "type": "text",
                "text": "YOTSUYA TOWER, 1-6-1 Yotsuya, Tokyo",
                "wrap": true,
                "color": "#666666",
                "size": "sm",
                "flex": 5
              }
            ]
          },
          {
            "type": "box",
            "layout": "baseline",
            "spacing": "sm",
            "contents": [
              {
                "type": "text",
                "text": "Time",
                "color": "#aaaaaa",
                "size": "sm",
                "flex": 1
              },
              {
                "type": "text",
                "text": "10:00 - 23:00",
                "wrap": true,
                "color": "#666666",
                "size": "sm",
                "flex": 5
              }
            ]
          }
        ]
      }
    ]
  },
  "footer": {
    "type": "box",
    "layout": "vertical",
    "spacing": "sm",
    "contents": [
      {
        "type": "button",
        "style": "link",
        "height": "sm",
        "action": {
          "type": "uri",
          "label": "CALL",
          "uri": "https://linecorp.com"
        }
      },
      {
        "type": "button",
        "style": "link",
        "height": "sm",
        "action": {
          "type": "uri",
          "label": "WEBSITE",
          "uri": "https://linecorp.com"
        }
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [],
        "margin": "sm"
      }
    ],
    "flex": 0
  }
}

# Use conditions of the video component

The following conditions must be met to use the video component:

  • The video component is specified directly under the hero block
  • kilo, mega or giga is specified as the value of the size property of the bubble
  • The bubble is not the child element of a carousel

# Video aspect ratio

A very wide or tall video may be cropped when played in some environments.

Also, the aspect ratio of the video specified in the url property and the following two aspect ratios should be the same. If these aspect ratios are different, the layout may result in an unexpected layout:

  • The aspect ratio specified by the aspectRatio property
  • The aspect ratio of the preview image specified by the previewUrl property

A video in a LINE chat room. A preview image with a 1:1 aspect ratio is displayed behind the video that has an aspect ratio of 16:9.

# URI action

Using the action property, you can specify a URI action. The label for a URI action will be displayed in the following three places:

A chat room when a video finishes playing A video player while a video is playing A video player when a video finishes playing

Specifying a URI action, you can open a specified URL in LINE 's in-app browser or call a specified phone number in a call app.

For more information about the URL action, see URI action in the Messaging API reference.

# How to play a video

Video isn't working properly

If the video isn't playing properly, make sure the video is a supported file type and the HTTP server hosting the video supports HTTP range requests. For more information about a supported file type, see Video in the Messaging API reference.

A video can be played in the following two ways:

# Auto-play in a chat room

Users can check whether or not a video will be played automatically in Settings > Photos & videos > Auto-play videos on the LINE app.

Auto-play videos setting auto-play
On mobile & Wi-Fi A video will be played automatically
On Wi-Fi only A video will be played automatically only on Wi-Fi
Never A video won't be played automatically

Auto-play is not supported on LINE for macOS and Windows.

# Screen when a video finishes playing

Screen when a video finishes playing

When a video finishes playing, Play and More information will be displayed on the video.

When the user taps Play, a video player will open and the video will replay. For more information, see Play manually in a video player.

More information is the label for a URI action specified in a video component. You can specify any labels. The label won't be displayed if a URI action is not specified. For more information, see URI action.

# Play manually in a video player

When the user taps a video in a chat room, the video will play in a video player.

# Screen while a video is playing

Screen while a video is playing

Done and More information will be displayed at the top of a video player while a video is playing.

When the user tap Done, the video player will close and return to the chat room. At this time, if the conditions for auto-playing a video are met, the rest of the video will be played in the chat room. For more information, see Auto-play in a chat room.

More information is the label for a URI action specified in a video component. You can specify any labels. The label won't be displayed if a URI action is not specified. For more information, see URI action.

# Screen when a video finishes playing

Screen when a video finishes playing

When a video finishes playing, Replay and More information will be displayed on the video.

When the user taps Replay, the video will replay in the video player.

More information is the label for a URI action specified in a video component. You can specify any labels. The label won't be displayed if a URI action is not specified. For more information, see URI action.

# Display on version of LINE that doesn't support the video component

If the version of LINE is lower than the version that supports the video component, the component specified as the value of the altContent property will be displayed. Specify a box or an image for the altContent property.

# Display on Flex Message Simulator

You can't preview a video on Flex Message Simulator. In the preview area of Flex Message Simulator, alternative content will be displayed as well as Display on version of LINE that doesn't support the video component.

Send a test message and check the message on your LINE app to check the video included in the message created with Flex Message Simulator. You can send a test message from Send... at the right top of Flex Message Simulator.

The Send... button on Flex Message Simulator