Отображение встроенных мультимедиа и внедрения в MSN

Узнайте, как правильно отображать изображения, видео, слайд-шоу и социальные вставки в тексте статьи с помощью HTML и MEDIA RSS. В этом руководстве описываются поддерживаемые теги, метаданные и рекомендации по форматированию, чтобы обеспечить беспроблемную отрисовку в MSN.

В этой статье

Рекомендации по HTML

Разрешенные теги HTML

Ограниченные теги HTML

Изображения

Отображение изображений с помощью встроенного HTML-кода

Отображение изображений с помощью RSS мультимедиа

Видео

См. также

Слайдшоу

Внедрение социальных сетей

Рекомендации по HTML

HTML можно использовать для указания основного поля статьи или поля описания изображения слайда в слайд-шоу. Он не допускается в других полях. При использовании HTML следует учитывать несколько общих рекомендаций:

  • Службы приема Майкрософт всегда будут удалять запрещенные теги. Содержимое тега и дочерние элементы также могут быть удалены.
  • Службы приема Майкрософт могут очищать HTML от элементов, которые могут повлиять на интерфейс отрисовки, например встроенные стили.
  • Издателям рекомендуется поддерживать простую иерархию HTML и избегать тесно связанных иерархий, превышающих 10 уровней.
  • Избегайте использования нескольких последовательных <тегов br> . <Разрывы строк br> в конце документа будут удалены.
  • <Iframe> , используемый для каких-либо целей, явно не упомянутых в этом документе, будет удален.

Разрешенные теги HTML

В тексте статьи разрешены следующие теги:

  • Стиль шрифта<b>, <i>, <em>, <strong>
  • Размер шрифта<sub>, <sup>, <small>
  • Заголовки<h1>, <h2>, <h3>, <h4>, <h5>
  • Ссылки<a> — значения href должны предпочтительно использовать HTTPS, HTTP и mailto:
  • Изображения<Img>
  • Таблицы<table>, <th>, <tr>, td>, <<thead>, <tbody>, <tfoot>, <col>, <подпись>, <colgroup>
  • Листинге<ol>, <ul>, <li>
  • Группировки<span>, <div>, <p>, <br>
  • Внедряет<blockquote>, <iframe> допускается только для видео и поддерживаемых социальных внедрений.

Примечание

Как правило, атрибуты удаляются из всех элементов, если они не используются базовыми компонентами, такими как href в <и> src в <img>.

Ограниченные теги HTML

Следующие теги всегда будут удалены из текста входящих статей, что может привести к отклонению содержимого:

  • <стиль>
  • <Сценарий>
  • <объект>
  • <Param>
  • <Апплет>
  • <внедрить>
  • <media:content url='http://test.com/test.mp4'>
  • <media:content url='http://test.com/test.avi'>
  • <media:content url='http://test.com/test.wmv'>
  • <Рисунок>
  • <Носителя>
  • <div><a href='https://infogram.com' /></div>
  • <a href='... giphy.com/gifs...'>via GIPHY</a>

Изображения

Размещение изображения

При добавлении изображения в текст HTML статьи с помощью <тегов img> или <рисунков> оно автоматически сохраняет его расположение в тексте. В противном случае, если вы используете <media:content>, изображение может быть размещено в месте, автоматически выбранном службами приема. Если тег имеет URL-адрес src, соответствующий <URL-адресу элемента media:content> , изображение будет приниматься только один раз и находиться там, где размещен тег img.

Изображение ведущего

Вы можете сообщить приему, что определенное изображение можно использовать в качестве рекомендуемого изображения в промо-карта, добавив class="type:primaryImage" в <тег img>.


<img src="http://contoso.com/image.jpg" class="type:primaryImage">

Отображение изображений с помощью встроенного HTML-кода

<Теги img>

Дополнительные метаданные можно предоставить при использовании тега <img> в тексте HTML элемента веб-канала. Если метаданные предоставляются для одного и того же URL-адреса изображения как встроенного, так и с помощью тегов MEDIA RSS, <метаданные media:content> всегда будут иметь приоритет.

Все метаданные изображения можно поместить в HTML, используя атрибуты data-*, как показано в следующем примере:


<content:encoded>  <![CDATA[      <p>Article body paragraph 1</p>             <img src="http://contoso.com/image.jpg"         width="620"        height="569"         title="Image title"        alt="Image alt text"        data-portal-copyright="Joe Gargery/Fabrikam Images"         data-has-syndication-rights="1"         data-license-id="698526"        data-licensor-name="Licensor name"         data-focal-region="x1:245,y1:145,x2:520,y2:320" />            <p>Article body paragraph 2</p></content:encoded>

<Теги рисунков>

Вы также можете заполнить <тег img> необязательными параметрами, как в предыдущем примере.


<content:encoded>  <![CDATA[      <p>Article body paragraph 1</p>             <figure>        <img src="http://contoso.com/image.jpg" width="620" title="image title" alt="Image alt text"/>        <figcaption>          Image caption          <span class="copyright">Image copyrights</span>        </figcaption>      </figure>                 <p>Article body paragraph 2</p></content:encoded>

Отображение изображений с помощью RSS мультимедиа

Рекомендуемый способ добавления метаданных изображения — использовать элемент Media RSS <media:content> для указания метаданных изображения. По умолчанию изображение будет размещено в верхней части статьи.

<элементы media:content> нельзя указать внутри текста статьи. Они должны быть указаны как непосредственные дочерние элементы корневого элемента (<элемент> в RSS или <запись> в Atom).


<!-- REQUIRED: URL must be provided for media elements   NOTE: you need to specify medium and set to "image" or "video" depending on the content type --><media:content url="https://contoso.com/image.jpg" type="image/jpeg" medium="image">    <!-- provide image credits (such as original photographer..etc) in this tag-->  <media:credit>Joe Gargery/Fabrikam Images</media:credit>    <!-- image title -->  <media:title>Image1 title</media:title>    <!-- use the text tag to specify alt-text -->  <media:text>Image1 alt-text</media:text>    <!-- to provide focal region information, you may use Microsoft Ingestion namespace as follows -->  <mi:focalRegion>    <mi:x1>245</mi:x1>    <mi:y1>145</mi:y1>    <mi:x2>520</mi:x2>    <mi:y2>320</mi:y2>  </mi:focalRegion>    <!-- Following 3 fields are used to specify image rights. If you do not indicate HasSyndicationRights as false, we assume you have the rights.-->  <mi:hasSyndicationRights>1</mi:hasSyndicationRights>  <mi:licenseId>698525</mi:licenseId>  <mi:licensorName>Licensor name</mi:licensorName></media:content>

Видео

MSN поддерживает конфигурации проигрывателя First-Party (1PP) и стороннего проигрывателя (3PP).

Видео о 1PP: В этом сценарии необходимо указать URL-адрес видеофайла, чтобы службы приема Майкрософт загружали и сохраняли файл на серверах MSN. Видео 1PP будет отображаться с помощью проигрывателя MSN Видео.

Видео 3PP: 3PP-видео воспроизводятся на конкретном поставщике (например, YouTube, DailyMotion и т. д.)

Отображение видео с помощью HTML

1PP

Для выражения встроенного <видео можно использовать HTML-тег video> .


<video id="8172818" title="Video title" poster="https://contoso.com/thumbnail.jpg" data-description="this is a sample inline video" data-portal-copyright="Joe Gargery/Fabrikam Videos">     <source src="https://contoso.com/video.mp4" type="video/mp4"></source>  </video>

3PP

YouTube — единственный проигрыватель 3PP, который поддерживается с помощью <элемента iframe> .


<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true"  src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>

Важно

Из-за недавних изменений платформы на стороне YouTube, MSN в настоящее время не может модерировать внедрения YouTube. В результате все видео YouTube 3PP, отправленные через веб-каналы или HTML статьи, будут отклонены во время приема. Эта проблема затрагивает небольшую часть глобального содержимого, но партнерам следует избегать использования внедрения YouTube до дальнейшего уведомления. Мы обновим это руководство после восстановления поддержки.

Отображение видео с помощью RSS мультимедиа

Чтобы внедрить мультимедиа с помощью MEDIA RSS, <media:content> элементы и <media:group> должны быть помещены за пределы текста HTML и добавлены в качестве непосредственных дочерних<item> элементов элемента (RSS) или <entry> (ATOM). Эти теги не могут быть упакованы в текст статьи или объединены с html-содержимым (например, в <content:encoded>), иначе они будут игнорироваться во время приема.

1PP


<!-- REQUIRED: URL must be provided for media elements. It is also used to uniquely identify the video.NOTE: you need to specify medium and set to "image" or "video" depending on the contenttype --><media:content url="https://contoso.com/video.mp4" duration="91" type="video/mp4" medium="video">    <!-- a <guid> may be specified to uniquely identify the video. If not specified, the URL will be used as an identifier. -->  <guid>8172818</guid>  <!-- video title must be specified. -->  <media:title>Video title</media:title>  <!-- video image thumnail is required if the video is 3PP (except YouTube) -->  <media:thumbnail url="https://contoso.com/image.jpg"/>    <!-- provide video attribution in media:credit, recommended format is: Author name/Agency name -->  <media:credit>Joe Gargery/Fabrikam Videos</media:credit>  <!-- description is used to specify caption text displayed below the video -->  <media:description>Video description</media:description></media:content>

YouTube


<media:content   type="application/x-shockwave-flash" medium="video"   isDefault="true" expression="full" duration="117"  url="https://www.youtube.com/v/XnZ_J3l_0z4">  <media:thumbnail url="https://contoso.com/images/thumb14ds12.jpg" />  <media:player url="https://www.youtube.com" />  <media:title>Video title</media:title>  <media:credit>Joe Gargery/Fabrikam Videos</media:credit></media:content>

Dailymotion


<media:content   type="application/x-shockwave-flash" medium="video"   isDefault="true" expression="full" duration="117"  url="https://www.dailymotion.com/video/x6qnrdo">  <media:thumbnail url="https://contoso.com/images/thumb60-zTG.jpg" />  <media:player url="https://www.dailymotion.com" />  <media:title>Video title</media:title>  <media:credit>Joe Gargery/Fabrikam Videos</media:credit></media:content>

Другое

Поддерживаемые видеоплееры 3PP должны быть указаны при подключении торговой марки издателя. Для этих поддерживаемых видеоплееров 3PP необходимо указать уникальный идентификатор видео с помощью <элемента GUID> для всех видео 3PP.


<!-- REQUIRED: <guid>, duration, title and description are required fields --><media:content   type="application/x-shockwave-flash" medium="video"   isDefault="true" expression="full" duration="117"  url="https://contoso.com/videos/268192">  <guid>268192</guid>  <media:thumbnail url="https://contoso.com/images/thumb14ds12.jpg" />  <media:player url="https://contos.com/player" />  <media:title>Video title</media:title>  <media:description>Video description</media:description>  <media:credit>Joe Gargery/Fabrikam Videos</media:credit></media:content>

Скрытые субтитры на видео

Элемент media:subtitle> можно использовать <для предоставления внешнего файла формата текста с заданным временем времени на основе формата W3C Timed Text. Сейчас поддерживается только TTML 1.


<media:content  type="video/mp4" duration="75" medium="video"  url="https://contoso.com/videos/sports.mp4">  <.....>  <.....>  <media:subTitle     type="application/ttml"     lang="en"     href="https://www.contols.org/closedcaptions.ttml" 
​​​​​​​/></media:content>

Видеофайлы должны быть сохранены в утвержденном формате, например в MP4-файле. Files разрешены, если они находятся на вашем веб-сайте или размещены на сервере, например AWS.

Ссылки Dropbox, ссылки на YouTube и т. д. не поддерживаются в RSS-каналах. Это связано с тем, что видео не может легко или сразу извлечь из этих ссылок, как они "закрыты".

Модуль "Больше от поставщика" позволяет брендам отображать три ссылки на содержимое на страницах статьи и коллекции, которые ссылаться на собственный веб-сайт бренда.

Существует два способа решить, какие три ссылки показаны в этом модуле:

  1. Автоматическое заполнение последних статей . Корпорация Майкрософт будет отображать ссылки на последние истории, которые она получила среди веб-каналов, предоставляемых вашей торговой маркой. Мы используем каноническую ссылку по умолчанию, но если она не указана, корпорация Майкрософт не будет отображать эту ссылку.
  2. Укажите связанные ссылки со статьей — см. ниже примеры того, как это сделать. Если этот параметр выбран, необходимо предоставить по крайней мере три связанные ссылки с каждым элементом содержимого в веб-канале.

Связанные ссылки можно добавить в качестве дочерних элементов в элементы веб-канала корневого уровня (статьи и коллекции). Как правило, издатели должны предоставить по крайней мере 3 ссылки, чтобы они отображались в разделе "связанные" в msn.

Все связанные и встроенные ссылки должны предпочтительно использовать схему HTTPS.

Чтобы указать в Atom, издатели могут просто использовать элемент . Они также должны использовать тот же элемент в RSS после объявления пространства имен Atom. Кроме того, поскольку требуется эскиз, можно объединить с <элементами media:> , как показано в этом примере:


<item><…>  <!-- Example of specifying 3 Related Links. In RSS, you need to use of the atom namespace `xmlns:atom="http://www.w3.org/2005/Atom"` -->    <!-- REQUIRED: links must have valid "href" and "title" attribute values.-->  <atom:link rel="related" type="text/html" href="https://contoso.com/news_1.html"       title="New IRS proposal">        <!-- REQUIRED: you must provide a thumbnail image with the link -->    <media:thumbnail url="https://contoso.com/image2.jpg"  />   </atom:link>  <atom:link rel="related" type="text/html" href="https://contoso.com/news_2.html"       title="New IRS proposal">    <media:thumbnail url="https://contoso.com/image2.jpg" />  </atom:link>  <atom:link rel="related" type="text/html" href="https://contoso.com/news_3.html"       title="New IRS proposal">    <media:thumbnail url="https://contoso.com/image3.jpg" />  </atom:link></item>

Слайдшоу

Встроенное слайд-шоу можно добавить в определенное расположение в HTML-коде текста статьи, используя специальную конструкцию <div class="Gallery"> в качестве контейнера ряда элементов рисунков<>.


<div class="slideshow">  <!-- use <cite> to specify an authro for the inline slideshow.  If not specified, the parent article's author will be assigned -->  <cite>Slideshow author</cite>  <!-- use <title> to specify an authro for the inline slideshow. If not specified, the parent article's title will be assigned -->  <title>Slideshow title</title>  <!-- each figure element is considered a separate slide -->  <figure>    <img src="https://v3spec.msn.com/image1.jpg" title="slide 1 title" />    <figcaption>slide 1 caption      <span class="copyright">slide 1 image copyrights</span>    </figcaption>  </figure>  <figure>    <img src="https://v3spec.msn.com/image2.jpg" title="slide 2 title" />    <figcaption>slide 2 caption      <span class="copyright">Joe Gargery/Fabrikam Images</span>    </figcaption>  </figure></div>

Отображение слайд-шоу с помощью RSS-файлов мультимедиа

Чтобы добавить встроенное слайд-шоу, используйте <элемент media:group> в качестве дочернего <элемента элемента> , с которым вы хотите внедрить Слайд-шоу.

Размещение слайд-шоу Встраиваемых мультимедиа RSS в статье определяется службами приема. Если вам нужно разместить слайд-шоу в определенном расположении, используйте ВМЕСТО этого HTML.


<!-- Note that in the case of embedded slideshow, the slideshow title and description     will be the same as the parent article's--><media:group>    <!-- Inline slideshow title. If you do not specify a title for inline slideshow,  the slideshow will be ingested with the same title of the parent article. -->  <media:title>Slideshow title</media:title>  <!-- Inlien slideshow author. Similar to title, if not specified, the slideshow will have the same author of the parent article. -->   <media:credit role="author">Slideshow author</media:credit>  <!-- in this case  you can provide consecutive slides in <media:content> -->  <media:content url="https://contoso.com/image1.jpg" type="image/jpeg" medium="image">    <!-- provide iamge attribution in media:credit,     recommended format is: Photographer name/Agency name -->        <media:credit>Joe Gargery/Fabrikam Images</media:credit>            <!-- REQUIRED: slide title must be provided in the following element -->    <media:title>Slide 1 title</media:title>        <!-- alt text for slide image-->    <media:text>Slide 1 alt-text</media:text>                  <!-- slide caption should be added in the description element. HTML is allowed in this field when you wrap content within a CDATA structure. -->    <media:description>      <![CDATA[        <p>Slide 1 description</p>      ]]>    </media:description>        <!-- additional slide image metadata -->    <mi:focalRegion>      <mi:x1>245</mi:x1>      <mi:y1>140</mi:y1>      <mi:x2>540</mi:x2>      <mi:y2>320</mi:y2>    </mi:focalRegion>    <mi:hasSyndicationRights>1</mi:hasSyndicationRights>    <mi:licenseId>698525</mi:licenseId>    <mi:licensorName>Licensor name</mi:licensorName>  </media:content>  <media:content url="https://contoso.com/image2.jpg" type="image/jpeg" medium="image">    <media:credit>Joe Gargery/Fabrikam Images</media:credit>    <media:title>Slide 2 title</media:title>    <media:text>Slide 2 alt-text</media:text>    <media:description>Slide 2 description</media:description>    <mi:focalRegion>      <mi:x1>110</mi:x1>      <mi:y1>312</mi:y1>      <mi:x2>615</mi:x2>      <mi:y2>520</mi:y2>    </mi:focalRegion>    <mi:hasSyndicationRights>1</mi:hasSyndicationRights>    <mi:licenseId>698526</mi:licenseId>    <mi:licensorName>Licensor name</mi:licensorName>  </media:content></media:group>

Внедрение социальных сетей

Следующие социальные внедрения можно вставить в текст HTML статьи:

  • X
  • Facebook
  • Instagram
  • Pinterest
  • Infogram;
  • Spotify
  • Процветать
  • Google Карты;
  • Giphy
  • Reddit
  • TikTok

Вы можете использовать стандартный код внедрения, рекомендуемый каждым поставщиком социальных сетей, чтобы убедиться, что внедрение сохранено в этой статье.

Все URL-адреса, указывающие на источники внедрения в социальные сети, должны быть строго https или в противном случае будут отклонены.

Ниже приведены некоторые примеры внедрения.

X


<blockquote class="twitter-tweet" align="center" width="350">    <p>We’re more optimistic than ever. The future will surprise the pessimists    </p>&mdash; Bill Gates (@BillGates)    <a href="https://twitter.com/BillGates/status/835506391339139073">February 25, 2017</a></blockquote>

Facebook (iframe)


<iframe frameborder="0" allowTransparency="true"     src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fcontosoice%2Fposts%2F1651549695142860&width=500"></iframe>

Facebook (div)


<div class="fb-post" data-href="https://www.facebook.com/contosoice/posts/1651549695142860" data-width="500" data-show-text="true">    <blockquote cite="https://www.facebook.com/contosoice/posts/1651549695142860">        <p>Post title</p>Posted by <a href="https://www.facebook.com/contosoice/">Contoso ICE</a>         on&nbsp;<a href="https://www.facebook.com/contosoice/posts/1651549695142860">Thursday, 8 December 2017</a>    </blockquote></div>

Instagram


<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/BjxlMSWnMJ-/" data-instgrm-version="8">    <div>        <p><a href="https://www.instagram.com/p/BjxlMSWnMJ-/">Imagine putting 864 servers at the bottom of the ocean #ProjectNatick.</a></p>        <p>A post shared by <a href="https://www.instagram.com/microsoft/">  Microsoft</a> (@microsoft) on <time>Apr 22, 2018 at 11:47am PDT</time></p>    </div></blockquote>

Мини-приложение для закрепления Pinterest


<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a> 

Мини-приложение доски Pinterest


<a data-pin-do="embedBoard" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80"     href="https://www.pinterest.com/pinterest/official-news/"></a> 

Мини-приложение профиля Pinterest


<a data-pin-do="embedUser" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="https://www.pinterest.com/pinterest/"></a> 

Infogram (адаптивный)


<script id="infogram_0_df4c17c3-3940-4434-b3a5-b1ef8ac096ef" title="Infogram: 8 years of greatness (infographic)"     src="https://e.infogram.com/js/dist/embed.js?qlT" type="text/javascript"></script>

Infogram (iframe)


<iframe src="https://e.infogram.com/df4c17c3-3940-4434-b3a5-b1ef8ac096ef?src=embed" title="Infogram: 8 years of greatness (infographic)"     width="700" height="8127" scrolling="no" frameborder="0" style="border:none;" allowfullscreen="allowfullscreen"></iframe>

Spotify


<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

Flourish (div)


<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>

Flourish (iframe)


<iframe src="https://public.flourish.studio/visualisation/2038977/embed" frameborder="0" scrolling="no" height="575" width="700" style="width:100%;"></iframe>

Google Карты;


<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13981.509066247283!2d-81.79698!3d28.827626!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x64c6defc49caa9f0!2sLake-Sumter%20State%20College!5e0!3m2!1sen!2sus!4v1587812382206!5m2!1sen!2sus"     width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

Giphy


<iframe src="https://giphy.com/embed/1WbNcJYD0ruf8nl3OJ" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>

Reddit


<blockquote class="reddit-card" data-card-created="1596039116">    <a href="https://www.reddit.com/r/microsoft/comments/hg4uiq/microsoft_official_support_thread/">        Microsoft: Official Support Thread</a> from <a href="http://www.reddit.com/r/microsoft">r/microsoft    </a></blockquote><script async src="//embed.redditmedia.com/widgets/platform.js" charset="UTF-8"></script>

TikTok


<blockquote class="tiktok-embed" cite=https://www.tiktok.com/@testtest/video/microsoft_official_support_thread data-video-id="microsoft_official_support_thread" style="max-width: 605px;min-width: 325px;" >    <section>        <a target="_blank" title="@bronniiieee" href=https://www.tiktok.com/@bronniiieee rel="noopener noreferrer">@billgates</a>        <p>Who is THAT?</p>        <a target="_blank" title="Music" href=https://www.tiktok.com/music/microsoft_official_support_thread rel="noopener noreferrer">Microsoft: Official Support Thread</a>    </section></blockquote>​​​​​​​