Video Player Widget

[lexoyo]

About

Insert video in your website thanks to this widget, in a very good quality, without ads and for free.

To insert video in a website made with Silex, there is the easy way, with Youtube or another service's embed code, as described in the "Embed code and widgets" section of this doc. But this means that you will have quite a poor quality and ads by google on your website.

And there is also the hard way for professionals or demanding users: this "Video Player Widget" will let you embed in your website a video which you host with your website - as opposed to a video hosted on Youtube. You will need to have your video exported for the web, as a .mp4 or .ogg file.

This widget is based on the HTML5 video player so the browser of your users has to support it.

Add a video to your website

For each video which you want to add to your site, you will have to upload your video somewhere, probably in the same folder than your website, or in a sub folder there (in Dropbox or FTP).

Then insert an HTML Box with the menu Insert > HTML Box, and double click on the element to edit its HTML content.

Finally paste this code there in order to display a video in the box:

<video controls="" preload="auto" poster="really-cool-video-poster.jpg" data-setup="{}" style="width: 100%; height: 100%;" height="100%" width="100%">
  <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm"> 
  <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"> 
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  <source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp">
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a web browser
    that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  </p>
</video>

Save and preview your website in order to check that it works like expected:

Then replace the default video by yours in replacing this section

  <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm"> 
  <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"> 
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  <source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp">

By your content, like this for example - if your video file is in a .mp4 format, called myvideo.mp4 and in a sub folder of your website called myfolder:

  <source src="myfolder/myvideo.mp4" type="video/mp4">

Or if your video is in the same folder as your website's HTML file it would be

  <source src="myvideo.mp4" type="video/mp4">

Let me know how it works for you and what you think about this widget?

FAQ

the video do not show up on the stage nor in preview

Try to publish and see if it shows up online. This happens in github for example because the videos are too big for preview mode (limitation of their API) but ok for github pages (published).

If it does not show up online, try with a smaller file or integrate a third party like youtube :-1:

the video is on top of other elements

Try to use the arrows of the context menu to move it under the elements

I want the video to be 100% the same size as its container

1- Add the CSS class video to your HTML box (see Silex CSS editor docs) 2- Add this to the CSS editor

div.video {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
div.video .silex-element-content {
    height: 100%;
}
div.video video {
    object-fit: cover;
}

I want the video to autoplay and / or loop

In the html code, add autoplay="" playsinline="" muted="" and / or loop="", so that it is like this:

<video autoplay="" playsinline="" muted="" loop="" controls="" preload="auto" poster="really-cool-video-poster.jpg" data-setup="{}" style="width: 100%; height: 100%;" height="100%" width="100%">

I want the video without the player controls

Look at the video element docs to see all the attributes

For controls, in the html code, remove controls="", so that it is like this:

<video preload="auto" poster="really-cool-video-poster.jpg" data-setup="{}" style="width: 100%; height: 100%;" height="100%" width="100%">

Related widgets

• The video background widget

[BaguetteAgile]

Bonjour @lexoyo

j'ai suivi ton tuto à la lettre, mais je n'arrive pas à visionner ma vidéo. Peut-être que mon chemin n'est pas bon ? Ma vidéo se trouve comme ceci:

voici le HTML de silex

Merci d'avance pour ta précieuse réponse.

[lexoyo]

Tu es sous quel navigateur pour éditer ton site? Tu devrais ouvrir la console d'erreur et c'est différent selon le navigateur

Tu peux aussi mettre ici le lien vers ta vidéo ? (En texte, pas une image)

[BaguetteAgile]

Je travail sous Linux avec Web Chromium, ou Firefox. Voici le lien de la video. https://www.dropbox.com/preview/Site%20Just-Friends/videojustfriends/greenriver.mp4?role=personal

[lexoyo]

voici ce que dropbox me dit quand je click sur le lien, c'est peut etre le probleme de silex

[BaguetteAgile]

c'est incompréhensible, car le lien est bon, si je ne suis pas connecté à Dropbox, je tombe sur une page de connexion, je rentre les identifiants et je peux visualiser la vidéo.

De plus ce Dossier "Site Just-Friends" le sous dossier "videojustfriends" et la vidéo "greenriver.mp4 est partagé avec toi !!

[lexoyo]

Pourquoi ne pas mettre la vidéo dans le meme dossier que ton site et mettre "./mavideo.mp4" comme URL (ou juste "mavideo.mp4" peut etre)

[BaguetteAgile]

Bonjour @lexoyo , voici a liste d’erreurs après ouverture de la console. j'espère que cela va pouvoir t'aider.

[lexoyo]

ah ok, on avance

• des problemes de https: remplace http://vjs.zencdn.net/5.0/video-js.min.css et http://vjs.zencdn.net/5.0/video.min.js dans ton code par des https (ton site est en http ou https? dans tous les cas mets des https, et je corrige le code du widget maintenant)

• la video greenriver.mp4 n'est pas trouvée, tu l'as mise dans le meme dossier que ton site?

[BaguetteAgile]

Je pense que la vidéo est ds le sous dossier . Je n ai pas le pc sous les yeux

Envoyé depuis ProtonMail mobile

-------- Message d'origine -------- On 9 mars 2018 à 17:49, Alex Hoyau a écrit :

ah ok, on avance

-

des problemes de https: remplace http://vjs.zencdn.net/5.0/video-js.min.css et http://vjs.zencdn.net/5.0/video.min.js dans ton code par des https (ton site est en http ou https? dans tous les cas mets des https, et je corrige le code du widget maintenant)

-

la video greenriver.mp4 n'est pas trouvée, tu l'as mise dans le meme dossier que ton site?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[BaguetteAgile]

J'ai fait de nombreux essais en plaçant la vidéo dans le même dossier que le HTML , sans succès. J'ai quand même l'impression que Silex ne trouve pas la vidéo sur Dropbox

Peut-être faut il chercher de ce coté ?

[BaguetteAgile]

Salut @lexoyo

je refait des tests avec ce lecteur vidéo car j'aimerai quitter "Youtube" afin d'obtenir des vidéos de meilleur qualité.

Tout fonctionne bien, la mise en place du lecteur, la prévisualisation.

Cependant je me rend compte de 2 erreurs:

impossible de publier, voici le message d'erreur de Silex:

Et le chemin de la vidéo est modifier par Silex après enregistrement du site. Voici un exemple:

Chemin juste pour la vidéo:

<source src="./greenriver.mp4" type="video/mp4">

Chemin modifier par Silex: <source src="https://preprod.silex.me/ce/dropbox/get/dossieressai/Essai%20lecteur%20video/greenriver.mp4" type="video/mp4">

[lexoyo]

Le chemin modifié m'a l'air normal Par contre l'erreur de publication non Tu as testé sur prod et preprod?

[BaguetteAgile]

Le test effectué sur:

https://editor.silex.me/ même message d'erreur https://preprod.silex.me/ même message d'erreur prod ?? quel est l'adresse ?

Pourquoi Silex change le chemin de la vidéo dans le fichier HTML ?

[lexoyo]

Oui pardon prod = editor.silex.me

Pourquoi Silex change le chemin de la vidéo dans le fichier HTML ?

il le change uniquement pendant l'édition, mais le restore quand on save, dans le fichier c'est pour que toutes les urls soient absolues (permet de déplacer le fichier sans perdre toutes ses image par exemple)

je check les erreurs tres bientot

[lexoyo]

hello j'ai regardé et je n'ai pas d'erreur, cf le fichier publié: https://lexoyo.me/test-silex000/index.html quand tu mets le code qui est dans me widget sans le modifier tu as aussi l'erreur?

[BaguetteAgile]

j'ai fait un test avec le code du widget, et pas d'erreur de publication.

[lexoyo]

Ah c'est une piste, j'essaie de regarder bientôt