Úplné nastavení Azure Media Playeru
Azure Media Player je snadné nastavit. Získání základního přehrávání mediálního obsahu přímo z účtu Azure Media Services trvá jen pár okamžiků. ukázky jsou také k dispozici v adresáři ukázek vydané verze.
Krok 1: Zahrňte soubory JavaScriptu a CSS do hlavy stránky
Pomocí Azure Media Playeru máte přístup ke skriptům z hostované verze CDN. Často se doporučuje dát JavaScript před koncovou značku textu <body> místo <head>, ale Azure Media Player obsahuje HTML5 Shiv, který musí být v hlavice starších verzí IE, aby se značka videa respektovala jako platný prvek.
Poznámka
Pokud už používáte html5 shiv, jako je Modernr můžete zahrnout JavaScript Azure Media Player kdekoli. Ujistěte se ale, že vaše verze Modernru obsahuje shiv pro video.
Verze CDN
<link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src= "//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
Důležitý
Neměli byste používat verzi latest v produkčním prostředí, protože se to může změnit na vyžádání. Nahraďte latest verzí Azure Media Playeru. Například nahraďte latest2.1.1. Verze Azure Media Playeru je možné dotazovat z zde.
Poznámka
Vzhledem k tomu, že 1.2.0 vydání, už není nutné zahrnout umístění do náhradních technologií (automaticky vyzvedne umístění z relativní cesty k souboru azuremediaplayer.min.js). Umístění náhradních technologií můžete upravit přidáním následujícího skriptu do <head> za výše uvedené skripty.
Poznámka
Vzhledem k povaze modulů plug-in Flash a Silverlight by se soubory swf a xap měly hostovat v doméně bez citlivých informací nebo dat – o to se automaticky postaráte pomocí hostované verze Azure CDN.
<script>
amp.options.flashSS.swf = "//amp.azure.net/libs/amp/latest/techs/StrobeMediaPlayback.2.0.swf"
amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/latest/techs/SmoothStreamingPlayer.xap"
</script>
Krok 2: Přidání značky videa HTML5 na stránku
Pomocí Azure Media Playeru můžete k vložení videa použít značku videa HTML5. Azure Media Player pak přečte značku a bude fungovat ve všech prohlížečích, nejen v těch, které podporují video HTML5. Kromě základního kódu potřebuje Azure Media Player několik dalších částí.
- Atribut
<data-setup>na<video>dává Azure Media Playeru pokyn, aby video automaticky nastavil, až bude stránka připravená, a přečte z atributu libovolný (ve formátu JSON). - Atribut
id: Měl by být použit a jedinečný pro každé video na stejné stránce. - Atribut
classobsahuje dvě třídy:-
azuremediaplayerpoužívá styly požadované pro funkce uživatelského rozhraní Azure Media Playeru. -
amp-default-skinpoužije výchozí vzhled ovládacích prvků HTML5.
-
-
<source>obsahuje dva požadované atributy.-
srcatribut může zahrnovat *.ism/manifest soubor ze služby Azure Media Services, Azure Media Player automaticky přidá adresy URL pro DASH, SMOOTH a HLS do přehrávače. -
typeatribut je požadovaný typ MIME streamu. Typ MIME přidružený k ".ism/manifest" je "application/vnd.ms-sstr+xml"
-
-
volitelný atribut
<data-setup>na<source>informuje Azure Media Player, jestli existují nějaké jedinečné zásady doručování streamu ze služby Azure Media Services, včetně typu šifrování (AES nebo PlayReady, Widevine nebo FairPlay), a tokenu.
Zahrnout nebo vyloučit atributy, nastavení, zdroje a stopy přesně tak, jak byste to chtěli pro video HTML5.
<video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" poster="poster.jpg" data-setup='{"techOrder": ["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"], "nativeControlsForTouch": false}'>
<source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
<p class="amp-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
</p>
</video>
Ve výchozím nastavení se velké tlačítko přehrát nachází v levém horním rohu, takže nezakrývá zajímavé části plakátu. Pokud chcete raději zacentrovat velké tlačítko přehrávání, můžete do prvku <video> přidat další amp-big-play-centeredclass.
Alternativní nastavení pro dynamicky načtený kód HTML
Pokud webová stránka nebo aplikace načítá značku videa dynamicky (ajax, appendChild atd.), aby při načítání stránky nemusela existovat, budete chtít přehrávač nastavit ručně místo toho, abyste se museli spoléhat na atribut nastavení dat. Pokud to chcete udělat, nejprve odeberte atribut nastavení dat ze značky, aby nedošlo k nejasnostem při inicializaci hráče. Potom spusťte následující JavaScript po načtení JavaScriptu v Azure Media Playeru a po načtení značky videa do počítače DOM.
var myPlayer = amp('vid1', { /* Options */
techOrder: ["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"],
"nativeControlsForTouch": false,
autoplay: false,
controls: true,
width: "640",
height: "400",
poster: ""
}, function() {
console.log('Good to go!');
// add an event listener
this.addEventListener('ended', function() {
console.log('Finished!');
});
}
);
myPlayer.src([{
src: "http://samplescdn.origin.mediaservices.windows.net/e0e820ec-f6a2-4ea2-afe3-1eed4e06ab2c/AzureMediaServices_Overview.ism/manifest",
type: "application/vnd.ms-sstr+xml"
}]);
Prvním argumentem ve funkci amp je ID značky videa. Nahraďte ho vlastním.
Druhým argumentem je objekt možností. Umožňuje nastavit další možnosti, jako je to možné s atributem nastavení dat.
Třetím argumentem je zpětné volání připraveno. Jakmile azure Media Player inicializuje, zavolá tuto funkci. V připraveném zpětném volání odkazuje objekt "this" na instanci hráče.
Místo použití ID elementu můžete také předat odkaz na samotný prvek.
amp(document.getElementById('example_video_1'), {/*Options*/}, function() {
//This is functionally the same as the previous example.
});
myPlayer.src([{ src: "//example/path/to/myVideo.ism/manifest", type: "application/vnd.ms-sstr+xml"]);