Πως μπορείτε να ενσωματώσετε βίντεο στο mkdocs χωρίς κανένα mkdocs plugin ή javascript βιβλιοθήκη για βίντεο.¶

Στην ελληνική GameLink σελίδα απο σήμερα στην θέση των βιντεο-οδηγών χρήσης του προγράμματος που έχω ανεβάσει στο youtube βρίσκονται τα ίδια 2 βίντεο όμως με ελληνικές οδηγίες και δεν τα ανέβασα στο youtube για τον πολύ απλό αλλά σημαντικό λόγο ότι δεν προσφέρει δυνατότητα κατεβάσματος τους σε όλους. Επίσης δεν ενσωμάτωσα κάποιο javascript video player γιατί όλοι πλέον οι browsers υποστηρίζουν τις απαραίτητες για την αναπαραγωγή τους κουμπιά ελέγχου (controls) των βίντεο και θεωρώ ότι είναι περιττή και ανούσια η ενσωμάτωση έστω και ενός minimal javascript player γιατί δυστυχώς ακόμα και minimal θα έχει θέματα συμβατότητας, π.χ. ο κάθε browser έχει την δική του υλοποίηση στο αντικείμενο... fullscreen του video!

Νομίζω από το προηγούμενο κιόλας άρθρο έγινε κατανοητό ότι η ελληνική GameLink σελίδα θα διαφέρει στην θεματολογία από την αγγλική αλλά τελικά θα διαφέρει και σε όσα προσφέρει στους Έλληνες αναγνώστες της που στην περίπτωση των βίντεο δεν είναι άλλο απο την ευκολία κατεβάσματός τους με απλά ένα δεξί κλικ στην περιοχή του βίντεο. Έτσι θα συνεχίσω τα άρθρα του GameLink με αυτό το άρθρο που δεν πρόκειται να το μεταφράσω ούτε αυτό στα αγγλικά γιατί δεν είναι στους σκοπούς της σελιδας αυτής να γίνει εργαστήριο εκμάθησης για όλο τον κόσμο.

Αν παρόλα αυτά θέλετε να ενσωματώσετε εναν javascript player στο βίντεο σας και επειδή ήδη ανέφερα τα προβλήματα συμβατότητας ανάμεσα στους browsers θα σας συνιστούσα για να μην πελαγώσετε να ξεκινήσετε με μια minimal έκδοση που υπάρχουν αρκετες στο διαδίκτυο, να συνεχίσετε με τους οδηγούς της mozilla που είναι ενας εκ των πρωτοπόρων στην υλοποίηση του αλλά και να μελετήσετε καλά πριν ξεκινήσετε την παραπάνω εικόνα που θα σας προϊδεάσει αν αξίζει ο χρόνος που θα ξοδέψετε για να λύσετε τα πραγματικά προβλήματα που θα συναντήσετε κατά την υλοποίηση ενός javascript player για τα MkDocs Video σας.

Υπάρχουν 2 τρόποι για να ενσωματώσετε τα βίντεο σας στα MkDocs άρθρα που είναι γραμμένα με την MarkDown σύνταξη.¶

Και αυτοί δεν είναι άλλοι από το παλιό καλό HTML iframe tag και με τον νέο HTML5 video tag. Ομως όσο εύκολο είναι να τα ενσωματώσετε τα βίντεο στις MarkDown σελιδες-αρθρα σας άλλο τόσο δύσκολο είναι αρχικά να εμφανίζονται όπως θέλετε αλλά και να έχουν επιπρόσθετες λειτουργίες όπως π.χ. να προσφέρετε υπότιτλους ή χρονοδείκτες για να τα βίντεο σας.

Μέχρι σήμερα που γράφω αυτό το άρθρο πρέπει να γράψω ότι ναι μεν ενσωμάτωσα δυνατότητες βίντεο player στο ελληνικό θέμα αλλά μην περιμένετε να το ενσωματώσω (ίσως ανεβάσω ξεχωριστή έκδοση για όσους το θέλουν) ή να έχει δυνατότητα δυναμικής χρονοσήμανσης π.χ. με κάποιο κουμπί/λινκ και με ενα ?t= που θα παραπέμπει τον χρήστη σε συγκεκριμένο χρονικό σημείο του βίντεο. Ακόμα και με χρήση εξωτερικών javascript βιβλιοθηκών οπως το videojs είναι αδύνατο λόγω του ότι για αυτές τις λειτουργίες/δυνατοτητες στα αρχεία βίντεο δεν μπορεί η javascript μέσα από στατικές σελιδες να παίξει τον ρόλο του server (αυτό ακριβώς κάνει η nodejs, php κλπ).

Κώδικας HTML για τα iframe βίντεο tag σας στο MkDocs.¶

Αρχικά πρέπει να γράψω ότι στα md αρχεία σας μπορείτε να χρησιμοποιήσετε HTML κώδικα σαν να ήταν μια κανονική html σελίδα. Ετσι το HTML κομμάτι που θα βρείτε παρακάτω το βάζετε σε κάθε md αρχείο σας και τον CSS κώδικα που θα βρείτε στο τέλος μόνο μια φορά στο mkdocs.yml αρχείο στο σημείο με τα υπόλοιπα custom css αρχεία που φορτώνει το mkdocs θέμα σας.

HTML

<div style="text-align: center;">
 <div class="containerzzztop">
      <iframe allowfullscreen="" sandbox="" class="videozzztop" src="https://el.gamelink.gr/vid/Pws-metakineis-me-to-GameLink-Epic-Games-Paixndia-se-Neo-Disko.mp4" frameborder="0" ></iframe>
 </div> 
</div>

Κώδικας HTML για τα HTML5 video tag σας στο MkDocs.¶

Ισχύουν τα ίδια με το iframe με την μόνη εξαίρεση οτι το video tag δεν είναι συμβατό με τους παλιότερους browser. Έτσι σε περίπτωση που το χρησιμοποιήσετε σε κανένα intranet με παλιούς Η/Υ ενδέχεται να μην σας δουλέψει και η χρήση του iframe του προηγούμενου παραδείγματος να είναι μονόδρομος. Και εδώ ισχύουν τα ίδια και το HTML κομμάτι το βάζετε σε κάθε md αρχείο σας και τον CSS κώδικα που θα βρείτε παρακάτω μόνο μια φορά στο mkdocs.yml αρχείο στο σημείο με τα υπόλοιπα custom css αρχεία που φορτώνει το mkdocs θέμα σας.

HTML

<div style="text-align: center;">
 <div class="containerzzztop">
  <video class="videozzztop" controls>
    <source src="https://el.gamelink.gr/vid/Pws-metakineis-me-to-GameLink-Epic-Games-Paixndia-se-Neo-PC.mp4"  type="video/mp4" />
    <p>ο browser σου δεν υποστηρίζει HTML5 βίντεο. <a href="https://el.gamelink.gr/vid/Pws-metakineis-me-to-GameLink-Epic-Games-Paixndia-se-Neo-PC.mp4">Κατέβασε το κατευθείαν απο εδώ</a></p>
  </video>
 </div> 
</div>

Κώδικας CSS και για τα 2 είδη των βίντεο στο MkDocs.¶

Ο CSS κώδικας είναι κοινός και μπορείτε να τον τροποποιήσετε ανάλογα με τα γούστα σας αν θέλετε διαφορετικές διαστάσεις αλλά και στις 2 περιπτωσεις τον τοποθετούμε μόνο μια φορά στο custom css αρχείο σας που το ενσωματώνεται στο mkdocs.yml αρχείο στο σημείο με τα υπόλοιπα custom css αρχεία στο tag με τίτλo extra_css. Οπως αυτό από κάτω που είναι το...

yaml κομμάτι από το mkdocs.yml του gamelink_el θέματος.

extra_css: 
  - "static/cssJs/bootstrap.min.css" # Bootstrap v4.5.2
  - "static/cssJs/highlight.css" # cinder theme element for styling code blocks on posts
  - "static/cssJs/gamelink.css" # my css overrides

CSS

/*responsive videos with iframes*/

.containerzzztop { position: relative;
  width: calc((100% - 12px * 3) / 3);
  height: 0; 
  padding-bottom: 21%;
  display: inline-block;
  margin: 3px; 
  background:url(https://el.gamelink.gr/static/images/loader.gif) center center no-repeat;
  box-shadow: 0 1px 3px 1px #000; 
  background-color: #000; }
.videozzztop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

@media (max-width: 2600px) {
  .containerzzztop { width: calc((100% - 12px * 2) / 2); padding-bottom: 30%; }
}
@media (max-width: 980px) {
  .containerzzztop { width: calc((100% - 7px * 3) / 2); padding-bottom: 33%; }
}
@media (max-width: 750px) {
  .containerzzztop { width: calc((100% - 7px * 1) / 1); padding-bottom: 50%;  }
}

Με αυτόν τον κώδικα ενσωμάτωσα τα youtube βίντεο του αγγλικού αλλά και τα τοπικά βίντεο του ελληνικού GameLink site που μπορείτε να κατεβάσετε με δεξί κλικ και αν απορείτε γιατί δεν χρησιμοποιώ το mkdocs-video ο λόγος είναι ότι δυστυχώς δεν δουλεύει όπως θα έπρεπε και η απόδειξη είναι στην σελίδα-οδηγό της MarkDown που έχω ανεβάσει για να μην ψάχνω συνέχεια στο διαδίκτυο πως γράφεται κάτι σε MarkDown.

Συμβατότητες iframe και video HTML tags¶

Το iframe tag είναι συμβατό με την HTML4 που χρησιμοποιούν όλοι οι παλιοί browsers απο την εποχή των θρυλικών Windows XP αλλά και με την HTML5 που χρησιμοποιούν οι σύγχρονοι browsers, όμως υστερεί καθολικά στην δυνατότητα διαχείρισης τους από την javascript όπως και δυστυχώς συμπεριφέρεται ανεξέλεγκτα.

Με την λέξη ανεξέλεγκτα εννοώ οτι μπορεί οι παλιοί browsers να το υποστηρίζουν αλλά δεν σημαίνει οτι το ελεγχουν κιολας και θα το καταλάβετε απο το sandbox="" σημείο που ειναι απαραίτητο ωστε να μην ξεκινάει να παίζει το βιντεο κάθε φορά που φορτώνει η σελίδα.

Από την άλλη το video HTML tag υποστηρίζεται μόνο από τους browsers που υποστηρίζουν HTML5, δηλαδή ξεχάστε το σε δίκτυο με παλιούς Η/Υ αλλά διαχειρίζεται πλήρως απο την javascript και ο μόνος πονοκέφαλος που προκαλούν στους προγραμματιστές είναι η συμβατότητα ανάμεσα στους browsers γιατί ο κάθε browser το έχει υλοποιήσει με τον δικό του τροπο... και το HTML video element!