Odtwarzacz wideo HTML5

pytanie zadane 31 grudnia 2015 w Nasze projekty przez Tricker Bywalec (2,630 p.)

Cześć, z uwagi na sporo wolnego czasu podczas przerwy od szkoły podjąłem się zrobienia odtwarzacza wideo, używając do tego wyłącznie:
HTML5
CSS3
JavaScript

Zerknijcie i oceńcie, zarówno mechanikę jak i wygląd :)
http://iTricker.pl/Video-Player/

Jedynie czego obecnie brakuję to ustawień, takich jak zmiana jakości wideo, ewentualne napisy, etc.
Do tego ikony. Obecnie są zrobione przy użyciu fontello, jednak kiedyś zmienię je pewnie na własne SVG.

Pozdrawiam i liczę na jakieś wskazówki co można by poprawić ;)

3 odpowiedzi

odpowiedź 31 grudnia 2015 przez jaca121212 Nałogowiec (40,760 p.)

Brak ładowania wideo podczas przewinięcia z początku na połowę wideo no chyba że jest a tego nie zauważyłem.

komentarz 31 grudnia 2015 przez Tricker Bywalec (2,630 p.)

Masz na myśli po prostu animację ładowania?

komentarz 31 grudnia 2015 przez jaca121212 Nałogowiec (40,760 p.)

Właśnie o taką animację chodzi

odpowiedź 31 grudnia 2015 przez Comandeer Guru (601,450 p.)

Polecam poczytać zalecenia WCAG odnośnie dostępności, bo na razie to jest po prostu pusta strona… Tutaj nawet żaden przycisk nie jest przyciskiem, co oznacza, że player jest NIEUŻYWALNY dla osób niepełnosprawnych.

Innym problemem z dostępnością jest zadeklarowanie języka polskiego dla strony, a napisanie jej po angielsku.

W JS wszystko jest w globalnym scope, a nie powinno.

Może byś się pokusił o przepisanie tego na Web Components? ;) Wówczas dostalibyśmy zgrabny video-player

komentarz 31 grudnia 2015 przez Tricker Bywalec (2,630 p.)

Polecam poczytać zalecenia WCAG odnośnie dostępności, bo na razie to jest po prostu pusta strona…
Innym problemem z dostępnością jest zadeklarowanie języka polskiego dla strony, a napisanie jej po angielsku.

Strona jest tylko po to by móc udostępnić ten player. Nie chciało mi się bawić w podpinanie fontello na jsFiddle.

Tutaj nawet żaden przycisk nie jest przyciskiem, co oznacza

Nie bardzo rozumiem, mógłbyś dokładniej wskazać co masz na myśli.

W JS wszystko jest w globalnym scope, a nie powinno.

Fakt, to jest do poprawy, jednak chwilowo nie miałem już czasu by przepisywać skryptu.
Swoją drogą, najlepiej przechowywać wszystkie elementy w jednym obiekcie?
Tak jak zrobiłem to tutaj: http://jsfiddle.net/iTricker/7pkcq5q5/

Może byś się pokusił o przepisanie tego na Web Components?

Nie bardzo wiem czym tak właściwie jest Web Components, także pewnie jak kiedyś o tym poczytam to przemyślę tę sugestie.

komentarz 31 grudnia 2015 przez Comandeer Guru (601,450 p.)

Strona jest tylko po to by móc udostępnić ten player. Nie chciało mi się bawić w podpinanie fontello na jsFiddle.

Serio, zobacz sobie zalecenia WCAG (https://www.w3.org/WAI/WCAG20/quickref/). Bo tu wcale nie chodzi.

Ty masz na stronie po prostu puste divy. A każdy element powinien mieć co najmniej tekstową etykietę. Polecam zobaczyć jak to wygląda np. w przypadku CKEditora (http://ckeditor.com/demo) – każdy element jest połączony z elementem, w którym jest jego opis. Nawet w przypadku przycisków, które zawierają samą ikonkę! Można też pójść w stronę tego, co robi Bootstrap: http://getbootstrap.com/css/#helper-classes-screen-readers → tutaj przyda się .visuallyhidden (http://a11yproject.com/posts/how-to-hide-content/)

Nie bardzo rozumiem, mógłbyś dokładniej wskazać co masz na myśli.

Pusty div to nie przycisk. Jak sama nazwa wskazuje, to po prostu pusty div… Czyli nie niesie żadnej wartości semantycznej i bez skryptu JS jest niczym. Dodatkowo przypięcie na nim kliku nie rozwiązuje problemów z obsługą go z poziomu klawiatury. Ani go nie ruszę TAB-em, ani nie aktywuję Enterem czy spacją. Dla czytników ekranowych to jest pusty element, którego nawet nie przeczytają. Dlatego poprawny przycisk powinien być przyciskiem z etykietą:

<button type="button"><i class="icon"></i> <span class="visuallyhidden">Jakaś akcja</span></button>

Smuci mnie, że w polskim web community o dostępności nikt nic nie wie…

komentarz 31 grudnia 2015 przez Tricker Bywalec (2,630 p.)

Hm. Zaczynam rozumieć.
Jak "przepiszę" player to odświeżę temat.

Smuci mnie, że w polskim web community o dostępności nikt nic nie wie…

To pewnie dlatego, że duża część osób to po prostu świeżaki (jak ja) :)

komentarz 31 grudnia 2015 przez Comandeer Guru (601,450 p.)

To nawet nie o to chodzi. Nasze agencje SEO myślą tylko o Google'u. Dla nich nagłówki to nośniki mocy i fraz. Skręca mnie jak słyszę ten bełkot. Po prostu u nas dostępność nie jest wymagana prawnie, więc wszyscy na to leją…

A wystarczy sobie 20 minut pochodzić po Sieci z włączonym JAWS (screen readerem), żeby zacząć dbać o dostępność – serio.