如何在 MSN 上显示内联媒体和嵌入
了解如何使用 HTML 和媒体 RSS 在文章正文中正确显示图像、视频、幻灯片放映和社交嵌入。 本指南概述了支持的标记、元数据和格式设置最佳做法，以确保在 MSN 上顺利呈现。
本文内容
HTML 准则
HTML 可用于在幻灯片放映中指定文章的正文字段或幻灯片图像描述字段。 不允许在任何其他字段中使用它。 使用 HTML 时，需要记住一些一般准则：
- Microsoft引入服务将始终删除不允许的标记。 标记内容和子级也可能被删除。
- Microsoft引入服务可能会从可能影响呈现体验（如内联样式）的元素中清除 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 中的 <> href 和 img> 中的 <src）使用。
受限制的 HTML 标记
以下标记将始终从传入文章的正文中剥离，并可能导致内容被拒绝：
- <样式>
- <脚本>
- <对象>
- <param>
- <Applet>
- <嵌入>
- <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...'>通过 GIPHY</a>
图像
图像放置
如果使用 img 或<图形>标记将图像添加到文章的 HTML 正文<，它会自动保留其在>正文中的位置。 否则，如果使用 <media：content>，图像可能会放置在引入服务自动选择的位置。 如果标记具有与 media：content> 元素的 URL 匹配的<“src”URL，则图像将只引入一次，并且将位于 img 标记的放置位置。
前导图像
可以通过向 img> 标记添加 class=“type：primaryImage”<，告知引入特定图像可用作促销卡中的特色图像。
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
使用内联 HTML 显示图像
<img> 标记
在源项的 <HTML 正文中使用 img> 标记时，可以提供其他元数据。 如果为同一图像 URL 提供内联和使用媒体 RSS 标记的元数据， <则 media：content> 元数据将始终优先。
可以通过利用 data-*属性将所有图像元数据内联置于 HTML 中，如以下示例所示：
<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 Player (1PP) 和第三方玩家 (3PP) 配置。
1PP 视频： 在这种情况下，必须提供视频文件 URL，以便Microsoft引入服务下载文件并将其存储在 MSN 服务器上。 将使用 MSN 视频 Player 呈现 1PP 视频。
3PP 视频： 3PP 视频在提供商特定的播放器上播放， (例如 YouTube、DailyMotion 等 )
使用 HTML 显示视频
1PP
可以使用 <视频> HTML 标记来表达内联视频。
<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 是唯一支持使用 iframe> 元素的 <3PP 播放器。
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
重要
由于 YouTube 方面最近的平台更改，MSN 目前无法审查 YouTube 嵌入。 因此，通过源或文章 HTML 提交的所有 YouTube 3PP 视频将在引入期间被拒绝。 此问题影响全球内容的一小部分，但合作伙伴应避免使用 YouTube 嵌入，直到另行通知。 恢复支持后，我们将更新本指南。
使用媒体 RSS 显示视频
若要使用 Media RSS 嵌入媒体，<media:content>和 <media:group> 元素必须放置在 HTML 正文之外，并添加为 (RSS) 或 <entry> ATOM) 元素 (的直接子<item>元素。 这些标记不能在文章正文 (（例如，) 内 <content:encoded> ）中包装或与 HTML 内容组合在一起，或者在引入期间将被忽略。
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 格式的外部 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 等服务器上，则允许它们使用。
不支持的链接
RSS 源不支持 Dropbox 链接、YouTube 链接等。 这是因为视频不能轻易也不会立即从这些链接中拉取，因为它们是“封闭的”。
相关链接
“更多来自提供商”模块是品牌在文章和库页面上显示三个内容链接的机会，这些链接链接到品牌自己的网站。
可通过两种方法确定本模块中显示了哪三个链接：
- 自动填充最新文章 - Microsoft将显示指向它从品牌提供的源中引入的最新文章的链接。 默认情况下，我们使用规范链接，但如果未提供，Microsoft将不会显示此链接。
- 提供与文章相关的链接 – 请参阅下文，了解如何执行此操作的示例。 如果选择此选项，则必须提供源中每个内容项的至少三个相关链接。
相关链接可以作为子元素添加到根级别源项 (文章和库) 。 通常，发布者必须提供至少 3 个链接，才能显示在 msn 的“相关”部分中。
所有相关链接和内联链接最好使用 HTTPS 方案。
若要在 Atom 中指定，发布者只需使用 元素即可。 声明 Atom 命名空间后，它们还需要在 RSS 中使用相同的元素。 此外，由于需要缩略图，因此可以与 <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>
幻灯片
可以通过利用特殊构造 <div class=“Gallery”>作为一系列图形>元素的容器，将内联幻灯片放映添加到文章正文 HTML 中的<特定位置。
<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
- Infogram
- Spotify
- 蓬勃发展
- Google Maps
- Giphy
- 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>— 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>
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>
信息报 (响应)
<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>
繁荣 (div)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
繁荣 (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>