Kaip rodyti įdėtąją mediją ir įdėti MSN
Sužinokite, kaip tinkamai rodyti vaizdus, vaizdo įrašus, skaidrių demonstravimus ir socialinių tinklų įdėjimo elementus straipsnio tekste naudojant HTML ir medijos RSS. Šiame vadove aprašomos palaikomos žymės, metaduomenys ir geriausios formatavimo praktikos, kad MSN būtų užtikrintas sklandus vaizdo generavimas.
Šiame straipsnyje:
Rodyti vaizdus su įdėtuoju HTML
Rodyti vaizdus naudojant medijos RSS
HTML gairės
HTML galima naudoti norint nurodyti straipsnio pagrindinį lauką arba skaidrių demonstravimo skaidrės vaizdo aprašo lauką. Tai neleidžiama jokiaame kitame lauke. Yra kelios bendrosios gairės, į kurias reikėtų atsižvelgti naudojant HTML:
- "Microsoft Ingestion Services" visada pašalins neleidžiamas žymes. Žymių turinį ir antrinius elementus taip pat galima pašalinti.
- "Microsoft Ingestion Services" gali išvalyti HTML iš elementų, kurie gali turėti įtakos generavimo patirčiai, pvz., įdėtųjų stilių.
- Rekomenduojama, kad leidėjai html hierarchiją išlaikytų nesudėtingą ir ventų gilesnių susietų hierarchijų, viršijančių 10 lygių.
- Venkite naudoti kelias iš eilės einančias <br> žymes. <br> eilutės lūžiai dokumento pabaigoje bus pašalinti.
- <"iframe",> naudojama jokiais tikslais, kurie nėra aiškiai paminėti šiame dokumente, bus pašalinti.
Leidžiamos HTML žymės
Šios žymės leidžiamos straipsnio tekste:
- Šrifto stilius<b>, <i>, <em>, <strong>
- Šrifto dydis<sub>, <sup>, <mažas>
- Antraštes<h1>, <h2>, <h3>, <h4>, <h5>
- Nuorodos<a> - href reikšmės turėtų naudoti HTTPS, HTTP ir mailto:
- Vaizdus<Img>
- Lenteles<lentelė>, <th>, <tr>, <td>, <thead>, <tbody>, tfoot>, <<col>, <caption>, <colgroup>
- Sąrašą<ol>, <ul>, <li>
- Grupavimo<span>, <div>, <p>, <br>
- Įdeda<"blockquote>", <"iframe"> galima naudoti tik vaizdo įrašams ir palaikomiems socialiniams įdėjimas.
Pastaba
Paprastai atributai bus pašalinti iš visų elementų, nebent jie yra naudojami pagrindinių funkcijų, pvz., href į <ir> src į <img>.
Apribotos HTML žymės
Šios žymės bus visada pašalintos iš gaunamų straipsnių teksto, todėl turinys gali būti atmestas:
- <stilius>
- <Scenarijų>
- <objektas>
- <param>
- <Programėlė>
- <įdėjimas>
- <media:content url='http://test.com/test.mp4">
- <media:content url='http://test.com/test.avi">
- <media:content url='http://test.com/test.wmv'>
- <Paveikslas>
- <medija>
- <div><a href='https://infogram.com' /></div>
- <a href = '... giphy.com/gifs...'>per GIPHY</a>
Atvaizdai
Vaizdo išdėstymas
Jei įtrauksite vaizdą į straipsnio HTML tekstą naudodami <img> arba <figure> žymes, ji automatiškai išsaugo savo vietą tekste. Kitu atveju, jei naudojate <media:content>, jūsų vaizdas gali būti automatiškai parinktoje vietoje, kurią pasirenka "Ingestion Services". Jei žymė turi "src" URL, kuris atitinka "media:content>" elemento URL<, vaizdas bus įsisavintas tik vieną kartą ir bus ten, kur yra "img" žymė.
Leading image
Galite informuoti, kad konkretus vaizdas gali būti naudojamas kaip matomas vaizdas reklaminėje kortelėje, įtraukiant class="type:primaryImage" į <img> žymę.
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
Rodyti vaizdus su įdėtuoju HTML
<img> žymės
Galite pateikti papildomus metaduomenis, kai naudojate <img> žymę informacijos santraukos elemento HTML tekste. Jei metaduomenys teikiami su tuo pačiu vaizdo URL ir įdėtuoju, ir su medijos RSS žymėmis, <medijos:turinio> metaduomenys visada bus pirmumo.
Visus vaizdo metaduomenis galite įdėti į HTML, atsižvelgdami į data-*atributus, kaip parodyta toliau pateiktame pavyzdyje:
<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>
<figure> tags
Taip pat galite automatiškai įvesti "img"> žymę pasirinktiniais parametrais kaip ankstesniame <pavyzdyje.
<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>
Rodyti vaizdus naudojant medijos RSS
Rekomenduojamas vaizdo metaduomenų įtraukimo būdas yra naudoti elementą Medija RSS <medija:turinys> vaizdo metaduomenims nurodyti. Pagal numatytuosius nustatymus vaizdas bus rodomas straipsnio viršuje.
<media:content> elementai negali būti nurodyti straipsnio tekste. Jie turi būti nurodyti kaip tiesioginiai šakninio elemento elemento antriniai elementai (<elementas> RSS arba <įrašas> 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>
Vaizdo įrašai
MSN palaiko First-Party leistuvo (1PP) ir trečiųjų šalių leistuvo (3PP) konfigūracijas.
1PP vaizdo įrašai: Tokiu atveju vaizdo įrašo failo URL turi būti pateiktas taip, kad "Microsoft Ingestion Services" atsisiųstų ir įrašytų failą MSN serveriuose. 1PP vaizdo įrašai bus generuojami naudojant MSN vaizdo įrašai leistuvą.
3PP vaizdo įrašai: 3PP vaizdo įrašai leidžiami konkrečiam teikėjui (pvz., "YouTube", "DailyMotion" ir kt.)
Rodyti vaizdo įrašą naudojant HTML
1PP
Norėdami išreikšti įdėtą <vaizdo įrašą, galite naudoti vaizdo> įrašo HTML žymę.
<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" yra vienintelis 3PP žaidėjas, kuris palaikomas naudojant <"iframe"> elementą.
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
Svarbu
Dėl naujausių platformos pakeitimų "YouTube" pusėje MSN šiuo metu negali moderuoti "YouTube" įdėjimo. Todėl visi "YouTube" 3PP vaizdo įrašai, pateikti per informacijos santraukas ar straipsnį HTML, bus atmesti prarijus. Ši problema turi įtakos nedidelei visuotinio turinio daliai, tačiau partneriai turėtų vengti naudoti "YouTube" įdėjimo, kol nebus pranešta. Atnaujinsime šias rekomendacijas, kai bus atkurtas palaikymas.
Vaizdo įrašo rodymas naudojant medijos RSS
Norint įdėti mediją naudojant medijos RSS, <media:content> elementai ir <media:group> elementai turi būti įdėti už HTML teksto ribų ir įtraukti kaip tiesioginiai elemento (RSS) arba <entry> (ATOM) vaikai <item> . Šių žymių negalima perkelti arba derinti su HTML turiniu straipsnio tekste (pvz., viduje <content:encoded>), arba jų įdėjus jų bus nepaisoma.
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>
Kita
Palaikomi 3PP vaizdo leistuvai turi būti nurodyti, kai leidėjo prekės ženklas yra įjungtas. Šiems palaikomiems 3PP vaizdo įrašų leistuvams būtina pateikti unikalų vaizdo įrašo identifikatorių per <guid> elementą visiems 3PP vaizdo įrašams.
<!-- 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>
Paslėptieji titrai vaizdo įraše
Galite naudoti <elementą media:subtitle> , kad pateiktumėte išorinio tekstinio formato failą, pagrįstą W3C laiko teksto formatu. Šiuo metu palaikomas tik 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>
Palaikomi saitai
Vaizdo įrašų failus reikia įrašyti patvirtintu formatu, pvz., MP4 failu. Files leidžiama, jei jie yra jūsų žiniatinklio svetainėje arba laikomi serveryje, pvz., AWS.
Nepalaikomi saitai
Bendrosios duomenų saugyklos nuorodos, "YouTube" saitai ir kt. nepalaikomos RSS informacijos santraukose. Taip yra todėl, kad vaizdo įrašas negali nei lengvai, nei iš karto ištraukti iš šių saitų, nes jie yra "vartai".
Susiję saitai
Modulis "daugiau iš teikėjo" yra galimybė prekių ženklams rodyti tris turinio saitus straipsnio ir galerijos puslapiuose, kurie susieja su prekės ženklo svetaine.
Yra du būdai, kaip nuspręsti, kurie trys saitai rodomi šiame modulyje:
- Automatiškai užpildykite naujausius straipsnius – "Microsoft" parodys saitus su naujausiomis istorijomis, kurias ji įsisavino iš jūsų prekės ženklo pateiktų informacijos santraukų. Pagal numatytuosius parametrus naudojame kanoninį saitą, bet jei jis nepateiktas, "Microsoft" šio saito nerodys.
- Pateikite susijusius saitus su straipsniu – toliau rasite pavyzdžių, kaip tai padaryti. Jei ši parinktis pasirinkta, turite pateikti bent tris susijusius saitus su kiekvienu informacijos santraukos turinio elementu.
Susijusius saitus galima įtraukti kaip antrinius elementus į šakninio lygio informacijos santraukos elementus (straipsnius ir galerijas). Paprastai leidėjai turi pateikti bent 3 saitus, kad jie būtų rodomi MSN dalyje "susiję".
Pageidautina, kad visi susiję ir įdėtieji saitai naudotų HTTPS schemą.
Norėdami nurodyti lauke Atomas, leidėjai gali tiesiog naudoti elementą. Jie taip pat turi naudoti tą patį elementą RSS po Atom vardų srities paskelbimo. Be to, kadangi reikalingas miniatiūros vaizdas, galite derinti su <medija:> elementais, kaip parodyta šiame pavyzdyje:
<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>
Skaidres
Įdėtąjį skaidrių demonstravimą galite įtraukti į konkrečią straipsnio teksto HTML vietą, kaip figūros elementų serijos konteinerį naudodami specialų konstruktą <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>
Skaidrių demonstravimas naudojant medijos RSS
Norėdami įtraukti įdėtąją skaidrių pateiktį, naudokite <elementą media:group> kaip elemento>, į kurį norite įdėti skaidrių demonstravimą, antrinį <elementą.
Inline Media RSS Slideshows vieta straipsnyje nusprendė Ingestion Paslaugos. Jei skaidrių demonstravimą reikia padėti konkrečioje vietoje, naudokite 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>
Socialinių tinklų įdėjimas
Šiuos bendruomenės įdėjimo veiksmus galima įterpti į straipsnio HTML tekstą:
- X
- Infogram
- Spotify
- Klestėti
- Google Maps
- Giphy
- TikTok
Galite naudoti standartinį įdėjimo kodą, kurį rekomenduoja kiekvienas socialinis teikėjas, kad įsitikintumėte, jog įdėjimas išsaugotas straipsnyje.
Visi URL, nukreipiantys į socialinių tinklų įdėjimo šaltinius, turi būti griežtai https arba kitaip atmesti.
Štai keli įdėjimo pavyzdžiai:
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 Pin" valdiklis
<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>
"Pinterest" lentos valdiklis
<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" profilio valdiklis
<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 (reaguoja)
<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>
Klesti (div)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
Klesti ("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>