带有Open Graph的iMessage中视频的丰富链接预览

Question

我正在尝试使用Open Graph为视频创建丰富的链接预览。我设法举了几个例子，但是我对iMessage有问题。我不知道为什么，但是在iMessage中，视频有时立即播放，有时不播放（具有播放按钮），有时根本不加载视频，仅显示缩略图。

经过一些测试，我注意到30MB的视频具有播放按钮（不会自动播放），但是1MB或5MB的视频始终会自动播放。

我需要的是，我通过iMe​​ssage发送的任何视频都具有播放按钮，但不会自动播放。但是我不知道该在哪里指定（是否自动播放）。例如，YouTube总是有播放按钮，我需要相同的功能。

如果我在播放器（https://example.com/og-test/player/）中输入og：video和og：video：secure_url URL，并设置og：video：type =“ text / html”，则视频不起作用（但在Twitter上可以播放器），仅显示缩略图，而YouTube视频使用相同的Open Graph元数据。但是，如果我将og：video和og：video：secure_url URL直接设置为视频（https://example.com/og-test/videos/video.mp4，并设置og：video：type =“ video / mp4”视频有效，但它具有自动播放功能。为什么？

还有一件事，我注意到如果消息接收器是iPhone 10或11，则Open Graph根本不起作用，但是如果iPhone 10或11是消息发送器，则Open Graph可以正常工作。在其他iPhone上，这不是问题。

我的示例在Facebook，Twitter（作为播放器），WhatsApp等上都能按预期工作。出现问题的地方只有iMessage。

这些是我的Open Graph元数据：

    <!-- Open Graph -->
    <meta property="og:site_name" content="My Website">
    <meta property="og:url" content="https://example.com/og-test/">
    <meta property="og:title" content="Open Graph Test">
    <meta property="og:description" content="Testing sharing videos with Open Graph">
    <meta property="og:image" content="https://example.com/og-test/videos/video-thumbnail.jpg">
    <meta property="og:type" content="video.other">

    <meta property="og:video" content="https://example.com/og-test/player/">
    <meta property="og:video:secure_url" content="https://example.com/og-test/player/">
    <meta property="og:video:type" content="text/html">
    <meta property="og:video:width" content="576">
    <meta property="og:video:height" content="324">

    <meta name="twitter:card" content="player">
    <meta name="twitter:site" content="@username">
    <meta name="twitter:url" content="https://example.com/og-test/">
    <meta name="twitter:title" content="Open Graph Test">
    <meta name="twitter:description" content="Testing sharing videos with Open Graph">
    <meta name="twitter:image" content="https://example.com/og-test/videos/video-thumbnail.jpg">
    <meta name="twitter:image:alt" content="Open Graph Test">
    <meta name="twitter:player" content="https://example.com/og-test/player/">
    <meta name="twitter:player:width" content="576">
    <meta name="twitter:player:height" content="324">

因此，当URL为video.mp4而不是iMessage中的/ player /时，为什么我的Open Graph设置可以工作？如何在Open Graph中设置始终需要单击视频才能播放视频，而不是在iMessage加载时自动播放视频；以及iPhone 10和11和Open Graph是什么？

任何解决方案，或解决方案的源头都很好。谢谢。

Answer 1

没有答案

由于我无法评论图片，因此我将在此处添加答案我找到了。

目标：

了解我们如何获得与youtube相同的预览。这意味着视频不会在丰富的预览中自动播放，并且会显示播放器。 （例如下图）

---

调查

[如果您查看youtube添加的元数据，似乎比Twitter的还多。我相信iOS不是使用twitter:player元，而是使用og:video:url。

    <meta property="og:site_name" content="YouTube">
    <meta property="og:url" content="https://www.youtube.com/watch?v=Im8itGAyZ6M">
    <meta property="og:title" content="Terry Crews Breaks Down His Career, from &#39;White Chicks&#39; to &#39;Brooklyn Nine-Nine&#39; | Vanity Fair">
    <meta property="og:image" content="https://i.ytimg.com/vi/Im8itGAyZ6M/maxresdefault.jpg">
    <meta property="og:image:width" content="1280">
    <meta property="og:image:height" content="720">
    <meta property="og:description" content="Terry Crews takes us through his legendary career, breaking down his roles in ‘Battle Dome,’ ‘Training Day,’ ‘White Chicks,’ ‘The Longest Yard,’ ‘Everybody H...">
    <meta property="al:ios:app_store_id" content="544007664">
    <meta property="al:ios:app_name" content="YouTube">
    <meta property="al:ios:url" content="vnd.youtube://www.youtube.com/watch?v=Im8itGAyZ6M&amp;feature=applinks">
    <meta property="al:android:url" content="vnd.youtube://www.youtube.com/watch?v=Im8itGAyZ6M&amp;feature=applinks">
    <meta property="al:android:app_name" content="YouTube">
    <meta property="al:android:package" content="com.google.android.youtube">
    <meta property="al:web:url" content="https://www.youtube.com/watch?v=Im8itGAyZ6M&amp;feature=applinks">
    <meta property="og:type" content="video.other">
    <meta property="og:video:url" content="https://www.youtube.com/embed/Im8itGAyZ6M">
    <meta property="og:video:secure_url" content="https://www.youtube.com/embed/Im8itGAyZ6M">
    <meta property="og:video:type" content="text/html">
    <meta property="og:video:width" content="1280">
    <meta property="og:video:height" content="720">
    <meta property="og:video:tag" content="terry crews">
    <meta property="og:video:tag" content="terry crews interview">
    <!-- [... lot of tags] -->
    <meta property="fb:app_id" content="87741124305">
    <meta name="twitter:card" content="player">
    <meta name="twitter:site" content="@youtube">
    <meta name="twitter:url" content="https://www.youtube.com/watch?v=Im8itGAyZ6M">
    <meta name="twitter:title" content="Terry Crews Breaks Down His Career, from &#39;White Chicks&#39; to &#39;Brooklyn Nine-Nine&#39; | Vanity Fair">
    <meta name="twitter:description" content="Terry Crews takes us through his legendary career, breaking down his roles in ‘Battle Dome,’ ‘Training Day,’ ‘White Chicks,’ ‘The Longest Yard,’ ‘Everybody H...">
    <meta name="twitter:image" content="https://i.ytimg.com/vi/Im8itGAyZ6M/maxresdefault.jpg">
    <meta name="twitter:app:name:iphone" content="YouTube">
    <meta name="twitter:app:id:iphone" content="544007664">
    <meta name="twitter:app:name:ipad" content="YouTube">
    <meta name="twitter:app:id:ipad" content="544007664">
    <meta name="twitter:app:url:iphone" content="vnd.youtube://www.youtube.com/watch?v=Im8itGAyZ6M&amp;feature=applinks">
    <meta name="twitter:app:url:ipad" content="vnd.youtube://www.youtube.com/watch?v=Im8itGAyZ6M&amp;feature=applinks">
    <meta name="twitter:app:name:googleplay" content="YouTube">
    <meta name="twitter:app:id:googleplay" content="com.google.android.youtube">
    <meta name="twitter:app:url:googleplay" content="https://www.youtube.com/watch?v=Im8itGAyZ6M">
    <meta name="twitter:player" content="https://www.youtube.com/embed/Im8itGAyZ6M">
    <meta name="twitter:player:width" content="1280">
    <meta name="twitter:player:height" content="720">

如果仔细看，我认为有4个重要属性：

<meta property="og:type" content="video.other">
<meta property="og:video:url" content="https://www.youtube.com/embed/Im8itGAyZ6M">
<meta property="og:video:secure_url" content="https://www.youtube.com/embed/Im8itGAyZ6M">
<meta property="og:video:type" content="text/html">

og:type，表示它是video和other，表示这不是可播放的文件类型。都指向嵌入播放器的og:video:url和og:video:secure_url。og:video:type说视频的类型是html，因为它是播放器

还请注意，og:video:width和og:video:height也可能很重要。

---

@@ RobiZzT，您可以对此进行测试并告诉我进展如何吗？找到解决方案后，我将更新答案。