Une App pour les gouverner Tous !

The Hobbit 2 une App pour les gouverner tous !

 

Bonjour à toutes et à tous, aujourd’hui je vais vous dévoiler dans un exemple concret d’app pour SharePoint comment implémenter une vidéo en respectant HTML5.

Tout d’abord, il faut se connecter à NAPA.


Ensuite, il faut créer une nouvelle App en cliquant sur « SharePoint puis sur « Add New Project »


Cliquez sur « App for SharePoint » Puis à droite renseignez un nom pour votre App.

Enfin, cliquez sur « Create »


Nous arrivons sur la page default.aspx.

Maintenant, nous allons nous rendre sur notre site SharePoint et déposer dans une bibliothèque de notre choix, une vidéo au format mp4.

Cliquez droit sur Office 365 pour ouvrir dans un nouvel onglet, la page.

 


Cliquez sur Documents


Cliquez sur « + nouveau document » puis sur « Télécharger un fichier existant »


Allez chercher sur votre disque dur le fichier mp4 en cliquant sur « Choisissez un fichier »


Sélectionnez le fichier puis cliquez sur « Ouvrir »


Cliquez sur « OK »

Il est possible également de faire un « Glisser/déplacer » pour aller plus vite.


Nous allons maintenant récupérer l’url du fichier mp4. Pour cela, faite un clic droit sur le fichier puis cliquez sur « copiez l’adresse du lien »


Dans mon cas, voici l’url que j’ai récupérée :

https://sharepoint4everdev.sharepoint.com/Documents%20partages/hobbit2.mp4

Maintenant, retournons sur Napa.


Sur la ligne 22 de la page « Default.aspx » nous allons modifier le texte « Page Title »

Par «  The Hobbit 2 SharePoint App » ce qui doit donner ceci :


Cliquez sur « Run project » à gauche de l’écran.


Cliquez droit sur « Click here to launch you app in a new windows » puis cliquez sur « Ouvrir le lien dans un nouvel onglet »


Notre modification a bien été prise en compte !

Maintenant plus dur, nous allons ajouter un player vidéo html 5 pour lire la vidéo que nous avons précédemment ajoutée à notre bibliothèque de document.

Pour cela, HTML5 apporte une nouvelle balise.

Celle-ci se nomme : vidéo et s’écrit : <video> </video>

Pour ajouter une vidéo sur notre page nous allons taper le code source suivant :

<video width= »640″ height= »360″ src= »https://sharepoint4everdev.sharepoint.com/Documents%20partages/hobbit2.mp4&Prime; autobuffer controls poster= »whale.png » autoplay>


</video>

 

Vous devrez changer https://sharepoint4everdev.sharepoint.com/Documents%20partages/hobbit2.mp4

Par l’url où se trouve votre vidéo.

Sélectionnez ce code, puis revenez dans la fenêtre NAPA.

Sur la page « default.aspx » placez vous ligne 28 après « <div> »

Et coller le code


Cliquez sur « Run project »




Et voilà, l’application se lance et lit la vidéo automatiquement.


 

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s