[CSS/HTML5] Trendy progress bar voor video player

[JKVA]

Ik ben bezig om van Parleys.com (Flex applicatie) een HTML versie te maken, gebruikmakend van de HTML5 video tag.

Maar ik heb nu een uitdaging, namelijk de progress bar voor de video player. De Flex versie heeft een vrij geavanceerde progress bar, zoals je hier kunt zien: http://www.parleys.com/#st=5&sl=7&id=1411

Ik wil dit ook in de HTML versie hebben, maar ik kan geen andere oplossing bedenken dan het met <canvas> tekenen en dat wil ik eigenlijk niet.

Dit zijn mijn wensen voor het component:

• Semantisch nette html.
• De 'chapters' moeten links met een anchor zijn, zodat ik een specifieke chapter kan bookmarken.
• Ik wil de voortgang tonen, bij voorkeur op dezelfde manier als in de Flex client.
• Ik wil (net als in de Flex client) de breedte van een blokje af laten hangen van de duur van een chapter. Het bepalen van de breedte is niet moeilijk. Ik weet de totale duur van de presentatie en ook de duur van iedere chapter, dus ik kan de breedte berekenen.

Ik heb een poging gedaan met plain HTML, zoals dit:

code:

<div id="videoNavigationBar">
<ul>
  <li>
    <a href="#slide_20912">
      <img style="width: 16.8284px;">
    </a>
  </li>
  <li>
    <a href="#slide_20913">
      <img style="width: 16.8284px;">
    </a>
  </li>
  <li>
    <a href="#slide_20914">
      <img style="width: 16.8284px;">
    </a>
  </li>
  <li>
    <a href="#slide_20915">
      <img style="width: 16.8284px;">
    </a>
  </li>
</ul>
</div>

Ik laat iedere UL links floaten en de breedte bereken ik met javascript. Maar echt lekker werkt het niet. Ik moet ook een plaatje in iedere A zetten omdat ik de A anders geen breedte kan geven.

Bovendien biedt deze oplossing geen plaats voor de voortgangsindicator, dus ik heb de indruk dat ik helemaal op de verkeerde weg ben...

Iemand van jullie een idee hoe ik dit component kan implementeren?

[ Voor 0% gewijzigd door JKVA op 16-05-2010 21:42 . Reden: HTML klopte niet, excuses ]

[kaesve]

semantisch nette html is dit in ieder geval niet. de keuze om elke link in zijn eigen lijst te zetten kan ik niet echt begrijpen. ik ben zelf maar een beetje hobbyist wat websites bouwen betreft en bovendien beginnen voor mij morgen de eindexamens (studieontwijkend gedrag.. :[), dus het zal vast wel beter kunnen, maar ik zou denk ik zoiets in elkaar prutsen:

HTML:

<div id="navigation_bar">
    <ul id="navigation_chapters">
        <li><a class="navigation_chapter" href="...">hoofdstuknaam {duur in mm:ss}</a></li>
        <li><a class="navigation_chapter" href="...">hoofdstuknaam {duur in mm:ss}</a></li>
        <li><a class="navigation_chapter" href="...">hoofdstuknaam {duur in mm:ss}</a></li>
    </ul>
    <div id="navigation_cursor"></div>
</div>

dan met js de chapters de goede breedte geven en een seperator toevoegen en natuurlijk de cursor laten bewegen?

een andere mogelijkheid, die misschien zelfs netter is hier, is werken met een <map>.

[R4gnax]

JKVA schreef op zondag 16 mei 2010 @ 21:09:

ik heb de indruk dat ik helemaal op de verkeerde weg ben...

Dat ben je inderdaad. De HTML sample en uitleg die je daarbij geeft, geven me de indruk dat er sprake is van een behoorlijk kennis gat m.b.t. HTML en vooral CSS. Begin eerst daar eens mee, zou ik zeggen.

[JKVA]

kaesve schreef op zondag 16 mei 2010 @ 21:28:
[...]
de keuze om elke link in zijn eigen lijst te zetten kan ik niet echt begrijpen.
[...]

Ik wel. Namelijk een copy paste fout bij het versimpelen van de snippet...

Ik zal de TS aanpassen...

[Juup]

R4gnax schreef op zondag 16 mei 2010 @ 21:28:
Dat ben je inderdaad. De HTML sample en uitleg die je daarbij geeft, geven me de indruk dat er sprake is van een behoorlijk kennis gat m.b.t. HTML en vooral CSS. Begin eerst daar eens mee, zou ik zeggen.

Daar heeft JKVA natuurlijk helemaal niks aan.

Het lijkt er op dat je goed op weg bent (copy/paste fouten daargelaten).
Je stelt alleen geen echt concrete vragen dus dan krijg je ook geen concrete antwoorden.

[JKVA]

Juup schreef op zondag 16 mei 2010 @ 22:52:
[...]

Daar heeft JKVA natuurlijk helemaal niks aan.

Het lijkt er op dat je goed op weg bent (copy/paste fouten daargelaten).
Je stelt alleen geen echt concrete vragen dus dan krijg je ook geen concrete antwoorden.

Ok, ehm, concrete vraag...

Het lijkt er dus op dat ik qua HTML structuur wel op de goede weg ben. De belangrijkste vraag is dan hoe ik die progress indicator er netjes overheen laat bewegen.

Gewoon met een losse div zoals in de post van kaesve? En die dan absoluut positioneren?

[iivvvii]

Dat je een plaatje zou moeten gebruiken voor de breedte kan je oplossen door de li in css display: block te zetten.

Voor de indicator zou je idd gewoon een div erover heen kunnen zetten en op dezelfde manier met javascript laten bereken waar de indicator zou moeten komen.