Video background on home page

Στο υπόβαθρο της αρχικής σελίδας παρουσιάζεται το βίντεο με την τρισδιάστατη αναπαράσταση των υποδομών του τμήματος πληροφορικής του Ιονίου Πανεπιστημίου.

Η αναπαραγωγή του βίντεο ξεκινά με την είσοδο του χρήστη στην σελίδα. Τα πλήκτρα ελέγχου και ο ήχος του βίντεο είναι απενεργοποιημένα. Το βίντεο παίζει συνεχώς σε επανάληψη.

Προσθήκη Βίντεο στο υπόβαθρο

Ο πηγαίος κώδικας της υλοποίησης αυτής βρίσκεται στα αρχεία:

• index.html του site-gr
• _layouts/video-layout.html του minimal-ionio
• _includes/video_background.html του minimal-ionio
• _sass/minimal-mistakes/_page.scss του minimal-ionio

Για την αλλαγή του βίντεο που παίζει στο υπόβαθρο, χρειάζεται απλά η αλλαγή του source στο index.html.

Layout

Το νέο layout video-layout.html επιτρέπει την χρήση είτε μίας εικόνας στο υπόβαθρο, είτε ενός βίντεο στο υπόβαθρο. Η δομή που ακολουθείται στο index.html για την χρήση εικόνας στο υπόβαθρο είναι η εξής:

ref: home
layout: video-layout
title: "Ιόνιο Πανεπιστήμιο"
header:
  overlay_color: "#5e616c"
  overlay_image: /assets/images/splash1.jpg
  cta_label: "<i class='fa fa-download'></i> Οδηγός Σπουδών 2016-2017"
  cta_url: "http://di.ionio.gr/wp-content/uploads/2016/09/OS_2016-2017-final.pdf"
  caption:

όπου το overlay_color υποδηλώνει το χρώμα-τόνο που φαίνεται πάνω από την εικόνα και το overlay_image υποδηλώνει την εικόνα που θα φαίνεται στο υπόβαθρο. Για την χρήση βίντεο στο υπόβαθρο, αντίστοιχα, ακολουθείται η εξής δομή:

ref: home
layout: video-layout
title: "Ιόνιο Πανεπιστήμιο"
header:
  video:
    source: "dUsAnW1zYqc"
    playlist: "dUsAnW1zYqc"
  cta_label: "<i class='fa fa-download'></i> Οδηγός Σπουδών 2019-2020"
  cta_url: "http://di.ionio.gr/wp-content/uploads/2019/10/DI-PROSPECTUS-2019-2020.pdf"
  caption:

όπου το video.source είναι το unique id του βίντεο που θα παίζει όταν επισκεφθεί ένας χρήστης την σελίδα και το video.playlist είναι το unique του βίντεο που θα παίζει σε επανάληψη όταν το πρώτο βίντεο τελειώσει (για να παίζει το ίδιο βίντεο σε επανάληψη απλά εισάγεται το ίδιο link και στα δύο πεδία). Παράδειγμα unique id (Bold χαρακτήρες): https...youtube.com/embed/4N_i7l0vhr4 Ο πηγαίος κώδικας της δομής video-layout βρίσκεται στο _layouts/video-layout.html του minimal-ionio.

Video Source Code

O κώδικας που είναι υπεύθυνος για την αναπαράσταση του βίντεο στην σελίδα βρίσκεται στο _includes/video_background.html του minimal-ionio. Το αρχείο αυτό παίρνει ως είσοδο το video.source και το video.playlist. Αυτές οι μεταβλητές χρησιμοποιούνται για την αναπαραγωγή ενός iframe video (embedded Youtube Player). Στο url του video έχουν προστεθεί επιπλέον εντολές όπως η σίγαση του ήχου του βίντεο, η αυτόματη αναπαραγωγή ή η απενεργοποίηση των πλήκτρων διαχείρισης του video. Οι εντολές αυτές είναι διαθέσιμες για όλα τα urls του Youtube. Περισσότερες πληροφορίες για τις εντολές αυτές αλλά και για το Youtube Embedded Player API μπορούν να βρεθούν εδώ.

Οπτική Διαμόρφωση Βίντεο

Για την αναπαραγωγή του βίντεο στο υπόβαθρο, είναι απαραίτητη η χρήση κώδικα css προκειμένου να διαμορφωθεί κατάλληλα το style του video. Ο πηγαίος κώδικας του style βρίσκεται στο _sass/minimal-mistakes/_page.scss του minimal-ionio με το όνομα .backgroundvid. To style διαθέτει ένα γκρι overlay το οποίο βοηθάει στην αναγνώριση του κειμένου που βρίσκεται μπροστά από το βίντεο. Το video έχει τοποθετηθεί πίσω από το overlay και το κείμενο με την χρήση του z-index. Τέλος οι διαστάσεις του iframe είναι οι εξής:

iframe,
  object,
  embed {
    position: absolute;
    top: -80px;
    left: 0;
    width: 100%;
    height: 180%;
    z-index: -2;
  }

Προσοχή Το βίντεο που χρησιμοποιήθηκε στην υλοποίηση του κώδικα αυτού έχει ανάλυση 480p (640×480p) και στην σελίδα είναι ορατά τα 2/3 του video.

Εναλλακτικές Προσεγγίσεις

Το Youtube επιτρέπει την δημιουργία λίστας αναπαραγωγής βίντεο (playlist). Στο αρχείο index.html μπορεί να εισαχθεί τo unique id του playlist στο video.playlist. Αυτό θα επιτρέψει το iframe την αναπαράσταση των βίντεο του playlist, το ένα μετά το άλλο. Περισσότερες πληροφορίες εδώ και εδώ.

Όπως επισημάνθηκε στο #95 και στο #138 θα ήταν σωστός ο έλεγχο της σύνδεσης-συσκευής (user agent) ώστε να μην παίζει σε μικρές-αργές συσκευές (smartphones-tablets) ή δυναμική αλλαγή του background της κεντρικής σελίδας με βάση την συσκευή αυτή. πχ. Background video όταν ο user agent είναι PC/Laptop ή GIF/Image όταν ο user agent είναι Smartphone/Tablet. Περισσότερες πληροφορίες εδώ και εδώ

Σχετικά issues: #95,#139,#138