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

Question

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

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

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

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

我还注意到，如果消息接收器是iPhone 10或11，则“打开图”根本无法工作，但是如果iPhone 10或11是消息发送器，则“打开图”可以正常工作。在其他iPhone上，这不是问题。

我的示例可以在Facebook，Twitter(作为播放器)，WhatsApp等上正常运行。发生问题的地方只有iMessage。

这些是我的开放图元数据:

    <!-- 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 meta，而是使用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可以用它进行测试并告诉我它如何进行吗？
找到解决方案后，我将更新答案。