Skip to main content

Tedshd's Dev note

在 iOS Messages 呈現帶影片預覽的連結

Table of Contents

最近添加了一個小功能要來測試成效

就是因為 PM 有看到一些服務的連結在 iOS Messages 上呈現並非常見的圖片而是影片

PM 說好像是 iOS 15 以上支援(我自己是沒找到相關的資料證明這件事)

不過應該沒支援的話就呈現圖片

查了一下文件, 其實也不難

基本上就是定義 open graph

多定義

<meta property="og:video" content="http://www.example.com/sample.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />

這邊有個要注意的點是

原來是產出 1:1 的影片, 但發現會上下截掉

所以最後採用 16:9 的比例

# demo

Refer - Best Practices for Link Previews in Messages