# LINE 專屬的 Flex 訊息第三版更新

大家好，我是做出「LINE 數位版名片」的 LINE API 專家均民。

LINE 在 2022/03/11 發佈了「Flex Message Update 3 released」 (opens new window)，這次的改版大概有這些內容：

支援在 hero 區塊放影片
box 支援 maxWidth 及 maxHeight 參數
文字現在可以設定行距 lineSpacing

這次最大的改版是支援在 Flex 訊息的 hero 區塊放影片，所以本文也會著重在討論這個功能。

# 加入官方帳號「Flex 開發人員工具」

本文會使用均民自己所開發的官方帳號「Flex 開發人員工具」進行測試，如果你也想要跟著嘗試看看的話，請掃描以下 QR Code 加入好友吧！

(opens new window)

加入好友: https://liff.line.me/1645278921-kWRPP32q/?accountId=736cebrk (opens new window)

# 準備影片

這個功能所需的影片網址，需要的是可以直接連結到影片檔案的網址，YouTube 或是 Google Drive 之類的連結是沒有辦法直接使用的，你可以選擇放到自己的網站伺服器上，或是 Google Cloud Storage、AWS S3 之類的靜態檔案服務上，這方面的教學可以直接去 Google 搜尋。

本文均民選擇使用 youtube-dl 這個開源工具去下載 https://www.youtube.com/watch?v=1qawxYdIsik 這個影片，然後透過 git 上傳到 GitHub Gist 上，但因為這不是這篇文章的重點，所以在此不會細談，以下是大概的指令：

$ youtube-dl -F 'https://www.youtube.com/watch?v=1qawxYdIsik'
[youtube] 1qawxYdIsik: Downloading webpage
[info] Available formats for 1qawxYdIsik:
format code  extension  resolution note
249          webm       audio only tiny   53k , webm_dash container, opus @ 53k (48000Hz), 389.12KiB
250          webm       audio only tiny   65k , webm_dash container, opus @ 65k (48000Hz), 484.02KiB
251          webm       audio only tiny  114k , webm_dash container, opus @114k (48000Hz), 841.88KiB
140          m4a        audio only tiny  129k , m4a_dash container, mp4a.40.2@129k (44100Hz), 950.87KiB
278          webm       256x144    144p   74k , webm_dash container, vp9@  74k, 30fps, video only, 548.95KiB
160          mp4        256x144    144p   79k , mp4_dash container, avc1.4d400c@  79k, 30fps, video only, 580.11KiB
242          webm       426x240    240p  129k , webm_dash container, vp9@ 129k, 30fps, video only, 948.04KiB
133          mp4        426x240    240p  161k , mp4_dash container, avc1.4d4015@ 161k, 30fps, video only, 1.16MiB
243          webm       640x360    360p  221k , webm_dash container, vp9@ 221k, 30fps, video only, 1.59MiB
134          mp4        640x360    360p  290k , mp4_dash container, avc1.4d401e@ 290k, 30fps, video only, 2.08MiB
244          webm       854x480    480p  359k , webm_dash container, vp9@ 359k, 30fps, video only, 2.58MiB
135          mp4        854x480    480p  513k , mp4_dash container, avc1.4d401f@ 513k, 30fps, video only, 3.68MiB
247          webm       1280x720   720p  695k , webm_dash container, vp9@ 695k, 30fps, video only, 4.98MiB
136          mp4        1280x720   720p  952k , mp4_dash container, avc1.64001f@ 952k, 30fps, video only, 6.82MiB
248          webm       1920x1080  1080p 1182k , webm_dash container, vp9@1182k, 30fps, video only, 8.47MiB
137          mp4        1920x1080  1080p 1879k , mp4_dash container, avc1.640028@1879k, 30fps, video only, 13.46MiB
18           mp4        640x360    360p  386k , avc1.42001E, 30fps, mp4a.40.2 (44100Hz), 2.77MiB
22           mp4        1280x720   720p 1080k , avc1.64001F, 30fps, mp4a.40.2 (44100Hz) (best)

$ youtube-dl -f 22 'https://www.youtube.com/watch?v=1qawxYdIsik'
[youtube] 1qawxYdIsik: Downloading webpage
[download] Destination: 防疫大作戰－日常防疫 5 Tips (田知學醫師，國語)-1qawxYdIsik.mp4
[download] 100% of 7.73MiB in 01:56

$ git clone git@gist.github.com:3a41f553ac230587512bd20d19fa906f.git gist220311
正複製到 'gist220311'...

$ cd gist220311
$ git add .
$ git commit -m 'upload video'
$ git push -u origin master

上傳完成後，你也需要幫影片準備一個預覽圖片，在此均民把預覽圖片上傳到 Imgur，以下是上傳完成後的網址：

影片: https://gist.githubusercontent.com/taichunmin/3a41f553ac230587512bd20d19fa906f/raw/video.mp4
預覽圖: https://i.imgur.com/nKkaGB2.jpeg

# 2020/03/14 補充：LINE VOOM 網路影片空間

耿順一學弟在看過我寫的這篇文章以後，跟我分享了一個小技巧，就是上傳到 LINE VOOM 的影片可以直接拿到 .mp4 的網址，就不需要使用均民在上面提供的上傳到 GitHub Gist 的方法喔！

首先，先前往 LINE 官方帳號管理頁面 (opens new window)，選擇一個不重要的頻道，然後到 LINE VOOM 點選建立：

然後點選「上傳圖片或影片」來上傳：

目前影片的相關限制如下：

影片上傳完成以後，就可以去按最下面的「貼文」按鈕。回到貼文頁面以後，再點進貼文的詳細內容：

進入貼文詳細內容以後，再次點選影片：

然後影片打開以後，對影片按下右鍵並從選單中選擇「複製影片位址」：

這樣就成功拿到網址囉！經過實測這個影片網址是真的可以在 Flex 訊息的 video 功能中正常使用，再次感謝耿順一學弟分享的小技巧。

# 撰寫 Flex 訊息

有了影片跟預覽圖以後，我們就可以來編寫 Flex 訊息所需要的 JSON 了，~~因為目前「Flex 訊息模擬器」 (opens new window)還不支援這個功能~~（3/18 更新：「Flex 訊息模擬器」 (opens new window)已經有支援編輯了，雖然只能顯示替代內容），所以目前只能自己手動撰寫這個 JSON：

{
  "type": "bubble",
  "size": "giga",
  "hero": {
    "type": "video",
    "url": "https://gist.githubusercontent.com/taichunmin/3a41f553ac230587512bd20d19fa906f/raw/video.mp4",
    "previewUrl": "https://i.imgur.com/nKkaGB2.jpeg",
    "aspectRatio": "1280:720",
    "altContent": {
      "type": "image",
      "size": "full",
      "aspectRatio": "1280:720",
      "aspectMode": "cover",
      "url": "https://i.imgur.com/nKkaGB2.jpeg"
    }
  }
}

寫完以後，你就可以直接把 JSON 複製貼上給均民所開發的「Flex 開發人員工具」：


Android	iPhone

除此之外，你還可以透過指定 action 參數，來幫影片多放一個連結（目前僅支援 uri action）：

{
  "type": "bubble",
  "size": "giga",
  "hero": {
    "type": "video",
    "url": "https://gist.githubusercontent.com/taichunmin/3a41f553ac230587512bd20d19fa906f/raw/video.mp4",
    "previewUrl": "https://i.imgur.com/nKkaGB2.jpeg",
    "aspectRatio": "1280:720",
    "action": {
      "type": "uri",
      "label": "在 YouTube 觀看",
      "uri": "https://www.youtube.com/watch?v=1qawxYdIsik"
    },
    "altContent": {
      "type": "image",
      "size": "full",
      "aspectRatio": "1280:720",
      "aspectMode": "cover",
      "url": "https://i.imgur.com/nKkaGB2.jpeg"
    }
  }
}