如何在 MSN 上顯示內嵌媒體與嵌入

如果你用 <img> 或 <figure> 標籤將圖片加入文章的 HTML 正文，它會自動保留該圖片在正文中的位置。否則，如果你使用 <media：content>，你的圖片可能會被 Inestion Services 自動選擇的位置放置。如果標籤的「src」網址與 media：content> 元素的 URL <相符，該圖片只會被擷取一次，且會位於 img 標籤所在的位置。

主圖

你可以在 img> 標籤中加入 class=“type：primaryImage”<，告知擷取某張特定圖片可以作為促銷卡的特色圖片。


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

以內嵌 HTML 顯示圖片

<圖片> 標籤

你可以在動態內容的 HTML 內使用 <img> 標籤時，提供額外的元資料。如果同一圖片 URL 的元資料同時包含內嵌且使用 Media RSS 標籤，則 <media：content> 元資料將永遠優先。

你可以利用 data-*attributes 將所有影像元資料內嵌在 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> 元素來指定影像元資料。預設情況下，圖片會放在文章的最上方。

<媒體：內容> 元素無法在文章正文中指定。它們必須指定為根元素的直接子節點， (<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) 以及第三方 Player (3PP) 配置。

1PP 影片： 此情境下，必須提供影片檔案 URL，讓 Microsoft Ingestion Services 下載並儲存該檔案至 MSN 伺服器。 1PP 影片將使用 MSN 影音播放器渲染。

3PP 影片： 3PP 影片會在供應商專用播放器上播放， (例如 YouTube、DailyMotion 等 )

以 HTML 顯示影片

1PP

你可以用 <video> 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三點影片，在上傳時都會被拒絕。此問題影響全球內容的一小部分，但合作夥伴應避免使用 YouTube 嵌入影片，直到另行通知。支援恢復後，我們將更新此指引。

以 RSS 媒體顯示影片

若要使用 Media RSS 嵌入媒體，<media:content>且<media:group>元素必須置於 HTML 主體之外，並作為 (RSS) <entry> 或 (ATOM) 元素的直接子<item>元素加入。這些標籤不能在文章正文中包裝或與 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 定時文字格式的外部定時文字格式檔案。目前僅支援 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 檔案。只要是來自你自己網站或託管在伺服器（如 AWS）上的 Files，則是被允許的。

不支援連結

Dropbox 連結、YouTube 連結等不支援 RSS 訂閱源。這是因為影片無法輕易或立即從這些連結中拉取，因為它們是「封閉」的。

「更多來自供應商」模組是品牌在文章與畫廊頁面展示三個內容連結的機會，這些連結連結至品牌自有網站。

有兩種方式可以決定本模組中顯示的三個連結：

自動填入最新文章 ——Microsoft 會在你品牌提供的動態中顯示其已接收的最新報導連結。我們預設使用正典連結，但如果沒有提供，Microsoft 不會顯示這個連結。
請附上相關連結 ——請參考下方範例。若選擇此選項，則必須為訂閱源中的每個內容項目提供至少三個相關連結。

相關連結可作為子元素加入根級訂閱項目， (條目及圖庫) 。一般來說，出版商必須提供至少 3 個連結，才能在 msn 的「相關」區塊出現。

所有相關及內嵌連結最好都採用 HTTPS 方案。

在 Atom 中指定，出版者只需使用元素即可。他們在宣告 Atom 命名空間後，還需要在 RSS 中使用相同的元素。此外，由於需要縮圖，你可以與 <media：> elements 結合，如本範例所示：


<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
Facebook
Instagram
Pinterest
Infogram
Spotify
繁榮
Google 地圖
Giphy
Reddit
TikTok

你可以使用各社會服務提供者推薦的標準嵌入代碼，以確保嵌入內容被保留在文章中。

所有指向社交嵌入來源的網址必須嚴格使用 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>


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


<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>


<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>

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 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 地圖


<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>

如何在 MSN 上顯示內嵌媒體與嵌入

本文內容

HTML 指引

允許的 HTML 標籤

受限 HTML 標籤

圖像

影像擺放

主圖