[Universal App] WinJS – Intégrer une vidéo Youtube

En C#/XAML, vous deviez utiliser l’application Youtube pour lancer des vidéos sur Windows Phone si vous n’en n’aviez pas le lien original. Maintenant avec WinJS sur Windows Phone, vous pouvez direcement intégrer la vidéo dans votre page sans utiliser une application annexe. De plus, le code pourra directement être partagé entre l’application Windows 8 et Windows Phone.

 

 

Youtube sur Windows Phone en winJS   Youtube sur Windows 8.1 en WinJS

Pour ce faire, on intégre directement dans la page html une iframe liée à la vidéo :

<body>
    <div class="fragment homepage">
        <header aria-label="Header content" role="banner">
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Youtube vidéo</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
			<iframe src="https://www.youtube.com/embed/kOxKrXdizeY" allowfullscreen></iframe>
        </section>
    </div>
</body>

Veillez bien à mettre le lien en HTTPS, et autoriser le lien « https://www.youtube.com/embed/ » dans le ContentsURIs dans les manifestes des applications Windows Phone et Windows 8.

Package Manifest

Par contre, si vous voulez toujours utiliser l’application Youtube pour lancer vos vidéos, voici le code adapté pour WinJS en Windows Phone :

            var videoButton = document.querySelector("#buttonLaunchVideo");
            videoButton.addEventListener("click", function() {

                var uriToLaunch = "vnd.youtube:V4CLkBjJJBI";

                var uri = new Windows.Foundation.Uri(uriToLaunch);
                var options = new Windows.System.LauncherOptions();
                options.treatAsUntrusted = true;

                Windows.System.Launcher.launchUriAsync(uri, options).then(
                    function(success) {
                        if (success) {
                            // URI launched
                        } else {
                            // URI launch failed
                        }
                    });
            }, null);

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *