Jak wyświetlać multimedia wbudowane i osadzania w witrynie MSN
Dowiedz się, jak prawidłowo wyświetlać obrazy, klipy wideo, pokazy slajdów i osadzania społecznościowe w treści artykułu przy użyciu formatów HTML i Media RSS. W tym przewodniku przedstawiono najważniejsze wskazówki dotyczące obsługiwanych tagów, metadanych i formatowania, aby zapewnić sprawne renderowanie w witrynie MSN.
W tym artykule
Wskazówki dotyczące języka HTML
Wyświetlanie obrazów z wbudowanym kodem HTML
Wyświetlanie obrazów za pomocą multimediów RSS
Osadza w mediach społecznościowych
Wskazówki dotyczące języka HTML
Za pomocą kodu HTML można określić pole treści artykułu lub pole opisu obrazu slajdu w pokazie slajdów. Nie jest to dozwolone w żadnym innym polu. Podczas korzystania z języka HTML należy pamiętać o kilku ogólnych wskazówkach:
- Usługi microsoft ingestion zawsze usuwają niedozwolone tagi. Zawartość tagu i elementy podrzędne również mogą zostać usunięte.
- Usługi ingestion firmy Microsoft mogą czyścić kod HTML z elementów, co może mieć wpływ na środowiska renderowania, takie jak style wbudowane.
- Zaleca się, aby wydawcy zachowali prostotę hierarchii HTML i unikali głęboko połączonych hierarchii wykraczających poza 10 poziomów.
- Unikaj używania wielu kolejnych <tagów br> . <Podziały wierszy br> na końcu dokumentu zostaną usunięte.
- <Element iframe> używany w żadnym celu, który nie został jawnie wymieniony w tym dokumencie, zostanie usunięty.
Dozwolone tagi HTML
Te tagi są dozwolone w treści artykułu:
- Styl< czcionkib>, <i>, <em>, <strong>
- Rozmiar< czcionkisub>, <sup>, <small>
- Nagłówki<h1>, <h2>, <h3>, <h4>, <h5>
- Linki<a> - wartości href powinny używać https, HTTP i mailto:
- Obrazów<Img>
- Tabel<tabela>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <podpis>, <colgroup>
- Aukcji<ol>, <ul>, <li>
- Grupowanie<span>, <div>, <p>, <br>
- Osadza<blockquote>, <iframe> dopuszczalne tylko dla wideo i obsługiwane osadzania społecznego.
Uwaga
Ogólnie rzecz biorąc, atrybuty zostaną usunięte ze wszystkich elementów, chyba że są używane przez funkcje źródłowe, takie jak href w <> a i src w <img>.
Ograniczone tagi HTML
Następujące tagi będą zawsze usuwane z treści przychodzących artykułów i mogą powodować odrzucenie zawartości:
- <styl>
- <Skrypt>
- <obiekt>
- <Param>
- <Aplet>
- <osadzanie>
- <media:content url='http://test.com/test.mp4'>
- <media:content url='http://test.com/test.avi'>
- <media:content url='http://test.com/test.wmv'>
- <Rysunek>
- <Media>
- <div><a href='https://infogram.com' /></div>
- <a href='... giphy.com/gifs...'>poprzez GIPHY</a>
Obrazy
Położenie obrazu
Jeśli dodasz obraz do treści html artykułu przy użyciu <tagów img> lub <rysunek> , automatycznie zachowuje on swoją lokalizację w treści. W przeciwnym razie, jeśli używasz multimediów <:zawartości>, twój obraz może zostać umieszczony w lokalizacji wybranej automatycznie przez Usługi pozyskiwania. Jeśli tag ma adres URL "src", który odpowiada adresowi URL elementu multimediów <:zawartości> , obraz zostanie połknął tylko raz i znajdzie się w miejscu umieszczenia tagu img.
Obraz wiodący
Możesz poinformować, że dany obraz może być używany jako polecany obraz na karcie promocyjnej, dodając class="type:primaryImage" do tagu <img> .
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
Wyświetlanie obrazów z wbudowanym kodem HTML
<Tagi img>
Możesz podać dodatkowe metadane, gdy używasz tagu <img> w treści HTML elementu kanału informacyjnego. Jeśli metadane są podane dla tego samego adresu URL obrazu zarówno w tekście, jak i przy użyciu tagów Media RSS, <metadane multimediów:zawartości> zawsze mają pierwszeństwo.
Wszystkie metadane obrazów można umieścić w tekście w języku HTML, wykorzystując atrybuty data-*, tak jak w poniższym przykładzie:
<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>
<Tagi rysunkowe>
Tag img> można również wypełnić <opcjonalnymi parametrami, co w poprzednim przykładzie.
<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>
Wyświetlanie obrazów za pomocą multimediów RSS
Zalecanym sposobem dodawania metadanych obrazu jest użycie elementu Multimedia RSS <:content> do określenia metadanych obrazu. Domyślnie obraz zostanie umieszczony u góry artykułu.
<media:elementów zawartości nie można określić> w treści artykułu. Należy je określić jako bezpośrednie dzieci elementu elementu głównego (<element> w RSS lub <wpis> w 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>
Klipy wideo
MSN obsługuje konfiguracje odtwarzaczy First-Party Player (1PP) i innych firm (3PP).
Klipy wideo 1PP: W tym scenariuszu adres URL pliku wideo musi być podany, aby usługi Microsoft Ingestion Services pobierają i przechowują ten plik na serwerach MSN. Klipy wideo 1PP będą renderowane przy użyciu programu MSN Wideo Player.
Klipy wideo dotyczące 3PP: Filmy 3PP są odtwarzane w odtwarzaczu specyficznym dla dostawcy (np. YouTube, DailyMotion itp.)
Wyświetlanie klipu wideo z obsługą JĘZYKA HTML
1PP
Za pomocą tagu HTML klipu <wideo> możesz wyrazić wbudowany klip wideo.
<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 jest jedynym graczem 3PP, który jest obsługiwany przy użyciu <elementu iframe> .
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
Ważne
Ze względu na ostatnie zmiany na platformie po stronie YouTube, MSN nie może obecnie moderować osadzania YouTube. W wyniku tego wszystkie klipy wideo z witryny YouTube 3PP przesłane za pośrednictwem kanałów informacyjnych lub artykułu HTML zostaną odrzucone podczas spożycia. Ten problem dotyczy niewielkiej części zawartości globalnej, ale partnerzy powinni unikać korzystania z osadzeń YouTube do odwołania. Zaktualizujemy te wskazówki po przywróceniu pomocy technicznej.
Wyświetlanie wideo za pomocą multimediów RSS
Aby osadzić multimedia przy użyciu narzędzia Media RSS, <media:content> elementy i <media:group> muszą zostać umieszczone poza treścią HTML i dodane jako bezpośrednie elementy podrzędne<item> elementu (RSS) lub <entry> (ATOM). Te tagi nie mogą być zawijane w treści artykułu ani łączone z zawartością HTML (np. w obrębie <content:encoded>), albo będą ignorowane podczas spożycia.
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>
Inne
W przypadku dołączenia marki wydawcy należy określić obsługiwane odtwarzacze wideo 3PP. W przypadku obsługiwanych odtwarzaczy wideo 3PP musisz podać unikatowy identyfikator wideo za pomocą <elementu guid> dla wszystkich klipów wideo 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>
Podpisy kodowane w klipie wideo
Za pomocą elementu multimediów <:podtytuł> można udostępnić zewnętrzny plik w formacie Czasowy tekst oparty na formacie W3C Timed Text. Obecnie obsługiwane jest tylko 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>
Obsługiwane linki
Pliki wideo muszą być zapisywane w zatwierdzonym formacie, takim jak plik MP4. Files są dozwolone, jeśli pochodzą z Twojej witryny internetowej lub są hostowane na serwerze, takim jak AWS.
Nieobsługiowane linki
Linki z usługi Dropbox, linki z witryny YouTube itp., nie są obsługiwane w kanałach informacyjnych RSS. Dzieje się tak dlatego, że film nie może łatwo ani od razu wyciągnąć z tych linków, ponieważ są one "ogrodzone".
Linki pokrewne
Moduł "więcej od dostawcy" jest okazją dla marek do wyświetlania trzech linków do treści na stronach artykułów i galerii, które prowadzą do własnej strony internetowej marki.
Istnieją dwa sposoby decydowania, które trzy linki są wyświetlane w tym module:
- Automatyczne wypełnianie najnowszych artykułów — firma Microsoft wyświetli linki do najnowszych historii, które połknął wśród kanałów informacyjnych dostarczanych przez Twoją markę. Domyślnie korzystamy z łącza kanonicznego, ale jeśli nie zostało to podane, firma Microsoft nie wyświetli tego linku.
- Artykuł zawiera linki pokrewne — poniżej przedstawiono przykłady tego, jak to zrobić. Jeśli ta opcja jest zaznaczona, musisz podać co najmniej trzy powiązane linki do poszczególnych elementów zawartości w kanale informacyjnym.
Powiązane linki można dodawać jako elementy podrzędne do elementów strumieniowych na poziomie głównym (artykułów i galerii). Ogólnie rzecz biorąc, wydawcy muszą podać co najmniej 3 linki, aby były wyświetlane w sekcji "powiązane" w msn.
Wszystkie powiązane i wbudowane linki powinny najlepiej korzystać ze schematu HTTPS.
Aby określić w atom, wydawcy mogą po prostu użyć elementu. Muszą również użyć tego samego elementu w RSS po zadeklarowaniu przestrzeni nazw Atom. Ponadto, ponieważ wymagany jest obraz miniatury, można połączyć go z <multimediami:> elementami, jak pokazano w tym przykładzie:
<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>
Pokazy slajdów
Pokaz slajdów w tekście można dodać do określonej lokalizacji w kodzie HTML treści artykułu, używając specjalnej konstrukcji <div class="Gallery"> jako kontenera serii elementów rysunku<>.
<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>
Wyświetlanie pokazów slajdów za pomocą multimediów RSS
Aby dodać wbudowany pokaz slajdów, użyj elementu multimediów <:grupy> jako elementu podrzędnego <elementu> , za pomocą którego chcesz osadzić pokaz slajdów.
Inline Media RSS Slideshows place within the article is decided by the Ingestion Services. Jeśli chcesz umieścić pokazy slajdów w określonej lokalizacji, zamiast tego użyj języka 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>
Osadza w mediach społecznościowych
W treści artykułu w formacie HTML można wstawić następujące osadzania społecznościowe:
- X
- Serwis Facebook
- Infogram
- Spotify
- Rozwijać
- Mapy Google
- Giphy
- TikTok
Możesz użyć standardowego kodu osadzania zalecanego przez każdego dostawcę usług społecznościowych, aby upewnić się, że osadzanie jest zachowane w tym artykule.
Wszystkie adresy URL wskazujące źródła osadzania społeczności muszą być ściśle https lub w inny sposób zostaną odrzucone.
Oto kilka przykładowych osadzania:
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 (ramka 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>
Widżet pinezki serwisu Pinterest
<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>
Widżet tablicy serwisu 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>
Widżet profilu serwisu 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 (czas odpowiedzi)
<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 (ramka 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>
Rozkwit (div)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
Rozkwit (iframe)
<iframe src="https://public.flourish.studio/visualisation/2038977/embed" frameborder="0" scrolling="no" height="575" width="700" style="width:100%;"></iframe>
Mapy 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>