Como exibir mídia embutida e inserções no MSN
Saiba como exibir corretamente imagens, vídeos, apresentações de slides e inserções sociais no corpo do artigo usando HTML e Mídia RSS. Este guia descreve marcas, metadados e práticas recomendadas de formatação com suporte para garantir uma renderização suave no MSN.
Neste artigo
Exibir imagens com HTML embutido
Exibir imagens com a mídia RSS
Diretrizes HTML
HTML pode ser usado para especificar o campo do corpo de um artigo ou o campo de descrição da imagem do slide em uma apresentação de slides. Não é permitido em nenhum outro campo. Há poucas diretrizes gerais a serem consideradas ao usar HTML:
- Os Serviços de Ingestão da Microsoft sempre removerão marcas não permitidas. O conteúdo da marca e as crianças também podem ser removidos.
- Os Serviços de Ingestão da Microsoft podem limpo HTML de elementos que podem afetar experiências de renderização, como estilos embutidos.
- É recomendável que os editores mantenham a hierarquia HTML simples e evitem hierarquias profundamente vinculadas além de 10 níveis.
- Evite usar várias marcas br> consecutivas<. <as> quebras de linha br no final do documento serão removidas.
- <iframe> usado para qualquer finalidade não mencionada explicitamente neste documento será removido.
Marcas HTML permitidas
Essas marcas são permitidas no corpo do artigo:
- Estilo de fonte<b>, <i>, <em>, <strong>
- Tamanho da fonte<sub>, <sup>, <pequeno>
- Títulos<h1>, <h2>, <h3>, <h4>, <h5>
- Links<a> – os valores href devem, preferencialmente, usar HTTPS, HTTP e mailto:
- Imagens<Img>
- Tabelas<tabela>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <legenda>, <colgroup>
- Lista<ol>, <ul>, <li>
- Agrupamento<span>, <div>, <p>, <br>
- Incorpora<blockquote>, <iframe> somente aceitável para vídeo e embeds sociais com suporte.
Observação
Geralmente, os atributos serão removidos de todos os elementos, a menos que sejam usados por recursos subjacentes, como href em <um> e src no <img>.
Marcas HTML restritas
As marcas a seguir sempre serão removidas do corpo dos artigos de entrada e podem resultar na rejeição do conteúdo:
- <estilo>
- <script>
- <objeto>
- <param>
- <Applet>
- <inserir>
- <media:content url='http://test.com/test.mp4'>
- <media:content url='http://test.com/test.avi'>
- <media:content url='http://test.com/test.wmv'>
- <Figura>
- <Mídia>
- <div><a href='https://infogram.com' /></div>
- <a href='... giphy.com/gifs...'>via GIPHY</a>
Imagens
Posicionamento de imagem
Se você adicionar uma imagem ao corpo HTML do artigo usando <marcas img> ou <figura> , ela preservará automaticamente sua localização dentro do corpo. Caso contrário, se você usar <mídia:conteúdo>, sua imagem poderá ser colocada em um local escolhido automaticamente pelos Serviços de Ingestão. Se uma marca tiver uma URL "src" que corresponda à URL de um <elemento media:content> , a imagem será ingerida apenas uma vez e estará localizada onde a marca img é colocada.
Imagem principal
Você pode informar a ingestão de que uma determinada imagem pode ser usada como uma imagem em destaque no card promocional adicionando class="type:primaryImage" à <marca img>.
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
Exibir imagens com HTML embutido
<marcas img>
Você pode fornecer metadados adicionais ao usar a <marca img> no corpo HTML do item de feed. Se os metadados forem fornecidos para a mesma URL de imagem tanto embutida quanto usando marcas RSS de mídia, <os metadados de mídia:conteúdo> sempre terão precedência.
Você pode colocar todos os metadados de imagem embutidos no HTML aproveitando os atributos data-*como no exemplo a seguir:
<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>
<marcas de figura>
Você também pode preencher a <marca img> com parâmetros opcionais como o exemplo anterior.
<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>
Exibir imagens com a mídia RSS
A maneira recomendada de adicionar metadados de imagem é usar o elemento Media RSS <media:content> para especificar metadados de imagem. Por padrão, a imagem será colocada na parte superior do artigo.
<media:elementos de conteúdo> não podem ser especificados dentro do corpo do artigo. Eles precisam ser especificados como filhos imediatos do elemento item raiz (<item> no RSS ou <entrada> no 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>
Vídeos
O MSN dá suporte a configurações First-Party Player (1PP) e 3PP (Jogador de Terceiros).
Vídeos 1PP: Nesse cenário, a URL do arquivo de vídeo deve ser fornecida para que o Microsoft Ingestion Services baixe e armazene o arquivo em servidores MSN. Os vídeos 1PP serão renderizados usando MSN Vídeo Player.
Vídeos 3PP: Os vídeos 3PP são reproduzidos em um player específico do provedor (por exemplo, YouTube, DailyMotion etc.)
Exibir vídeo com HTML
1PP
Você pode usar a marca HTML de <vídeo> para expressar um vídeo embutido.
<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
O YouTube é o único player 3PP com suporte usando o <elemento iframe> .
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
Importante
Devido a alterações recentes na plataforma no lado do YouTube, o MSN não pode moderar os inserções no YouTube no momento. Como resultado, todos os vídeos do YouTube 3PP enviados por meio de feeds ou html do artigo serão rejeitados durante a ingestão. Esse problema afeta uma pequena parte do conteúdo global, mas os parceiros devem evitar o uso de inserções do YouTube até segunda ordem. Atualizaremos essas diretrizes assim que o suporte for restaurado.
Exibindo vídeo com a mídia RSS
Para inserir mídia usando o Media RSS, os <media:content> elementos e <media:group> devem ser colocados fora do corpo HTML e adicionados como filhos imediatos do<item> elemento (RSS) ou <entry> (ATOM). Essas marcas não podem ser encapsuladas ou combinadas com conteúdo HTML dentro do corpo do artigo (por exemplo, dentro <content:encoded>), ou serão ignoradas durante a ingestão.
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>
Outro
Os players de vídeo 3PP com suporte devem ser especificados quando a marca do editor estiver integrada. Para esses players de vídeo 3PP com suporte, você deve fornecer um identificador de vídeo exclusivo por meio do <elemento guid> para todos os vídeos 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>
Legendas fechadas em vídeo
Você pode usar o <elemento media:subtítulo> para fornecer um arquivo de formato de texto temporizado externo com base no formato W3C Timed Text. Apenas o TTML 1 é atualmente suportado.
<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>
Ligações suportadas
Os ficheiros de vídeo têm de ser guardados num formato aprovado, como um ficheiro MP4. Files são permitidos se forem provenientes do seu próprio site ou alojados num servidor como o AWS.
Ligações não suportadas
As ligações do Dropbox, as ligações do YouTube, etc., não são suportadas em feeds RSS. Isto deve-se ao facto de o vídeo não poder solicitar facilmente nem imediatamente essas ligações, uma vez que estão 'fechadas'.
Links relacionados
O módulo "mais do fornecedor" é uma oportunidade para as marcas exibirem três ligações de conteúdo em páginas de artigos e galerias, que ligam ao site da própria marca.
Existem duas formas de decidir quais são as três ligações apresentadas neste módulo:
- Preencher automaticamente os artigos mais recentes – a Microsoft irá apresentar ligações para as histórias mais recentes que ingeriu entre os feeds fornecidos pela sua marca. Utilizamos a ligação canónica por predefinição, mas se não for fornecida, a Microsoft não apresentará esta ligação.
- Forneça ligações relacionadas com o artigo – veja abaixo exemplos sobre como fazê-lo. Se esta opção estiver selecionada, tem de fornecer, pelo menos, três ligações relacionadas com cada item de conteúdo no feed.
As ligações relacionadas podem ser adicionadas como elementos subordinados aos itens de feed ao nível da raiz (artigos e Galerias). Geralmente, os publicadores têm de fornecer pelo menos 3 ligações para que apareçam na secção "relacionado" no msn.
Todas as ligações relacionadas e inline devem, de preferência, estar a utilizar o esquema HTTPS.
Para especificar no Atom, os publicadores podem simplesmente utilizar o elemento . Também precisam de utilizar o mesmo elemento no RSS depois de declarar o espaço de nomes Atom. Além disso, como é necessária uma imagem em miniatura, pode combinar com <elementos multimédia> , conforme mostrado neste exemplo:
<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>
Apresentações de diapositivos
Pode adicionar uma Apresentação de Diapositivos inline a uma localização específica no html do corpo do artigo ao utilizar uma construção <especial div class="Gallery"> como um contentor de uma série de elementos de <figura> .
<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>
Apresentar apresentações de diapositivos com RSS multimédia
Para adicionar uma Apresentação de Diapositivos inline, utilize o <elemento media:group> como elemento subordinado do item> com o <qual pretende incorporar Apresentação de Diapositivos.
As Apresentações de Diapositivos RSS de Multimédia Inline no artigo são decididas pelos Serviços de Ingestão. Se precisar de colocar as Apresentações de Diapositivos numa localização específica, utilize 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>
Incorporações de redes sociais
As seguintes incorporações sociais podem ser inseridas num corpo HTML do artigo:
- X
- Infogram
- Spotify
- Florescer
- Google Maps
- Giphy
- TikTok
Pode utilizar o código de incorporação padrão recomendado por cada fornecedor de redes sociais para garantir que a incorporação é preservada no artigo.
Todos os URLs que apontam para origens de incorporação social têm de ser estritamente https ou, de outra forma, serão rejeitados.
Eis alguns exemplos de incorporações:
X
<blockquote class="twitter-tweet" align="center" width="350"> <p>We’re more optimistic than ever. The future will surprise the pessimists </p>— 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 <a href="https://www.facebook.com/contosoice/posts/1651549695142860">Thursday, 8 December 2017</a> </blockquote></div>
<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>
Widget pin do Pinterest
<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>
Widget de quadro do 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>
Widget de perfil do 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>
Infograma (reativo)
<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>
Infograma (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>
Florescer (div)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
Florescer (iframe)
<iframe src="https://public.flourish.studio/visualisation/2038977/embed" frameborder="0" scrolling="no" height="575" width="700" style="width:100%;"></iframe>
Google Maps
<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>
<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>