Богатые превью ссылок для видео в iMessage с Open Graph - PullRequest
2 голосов
/ 17 апреля 2020

Я пытаюсь создать расширенные превью ссылок для видео с помощью Open Graph. Мне удалось привести несколько примеров, но у меня проблема с iMessage. Я не знаю почему, но в iMessage видео иногда воспроизводится сразу, иногда нет (имеет кнопку воспроизведения), а иногда вообще не загружает видео, показывает только миниатюру.

После некоторого тестирования Я заметил, что видео размером 30 МБ имеет кнопку воспроизведения (не воспроизводится автоматически), но видео размером 1 или 5 МБ всегда воспроизводится автоматически.

Мне нужно, чтобы у любого видео, отправляемого через iMessage, была кнопка воспроизведения, чтобы оно не запускается автоматически Но я не знаю, где мне нужно это указать (автозапуск или нет). Например, на 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 URL-адрес видео напрямую (https://example.com/og-test/videos/video.mp4, и установлю og: video: type = "video / mp4" video, то оно работает, но в нем есть автозапуск. Почему это что?

Еще одна вещь, которую я заметил, что если получатель сообщения iPhone 10 или 11, Open Graph вообще не работает, но если iPhone 10 или 11 является отправителем сообщения, тогда Open Graph работает нормально. На других iPhone это не проблема.

Мои примеры работают, как и ожидалось, на Facebook, в Twitter (в качестве игрока), на WhatsApp и т. д. c. Только 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">

Итак, почему моя установка Open Graph работает, когда URL - это video.mp4, но не / player / в iMessage, как установить в Open Graph, что для воспроизведения видео всегда нужно нажимать, а не загружать его автоматически при загрузке в iMessage, а как обстоят дела с iPhone 10 и 11 и Open Graph?

Любое решение или источник решения будут хорошими. Спасибо.

1 Ответ

0 голосов
/ 01 мая 2020

НЕ ОТВЕТ

Поскольку я не могу комментировать фотографии, я добавлю здесь ответ с тем, что нашел.

Цель:

Понимать, как мы можем получить такой же вид предварительного просмотра, как YouTube. Это означает, что видео не воспроизводится автоматически в режиме предварительного просмотра и проигрыватель отображается. (например, изображение ниже)

enter image description here


Расследование

Если вы посмотрите на мета, добавленную 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 свойства importants:

<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 adn og:video:height также может быть важно.


@ RobiZzT Вы можете проверить это с этим и сказать мне, как оно идет? Я обновлю ответ, как только мы найдем решение.

...