New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add track example. #940

Merged
merged 7 commits into from May 23, 2018

Conversation

Projects
None yet
2 participants
@sheeeng
Contributor

sheeeng commented May 19, 2018

Fix #762.

sheeeng added some commits May 19, 2018

@wbamberg

This comment has been minimized.

Member

wbamberg commented May 23, 2018

This is a very nice example. I believe this is going to be the last of the "Image and multimedia" examples, really fantastic work!!

A couple of suggestions:

  • as I understand it, <source> is mostly used where you have multiple different possible sources for a video. Since here you just have one, why not just use the src attribute of <video>? It would simplify the markup...

  • according to the W3C validator, you need to quote the href in the footer:

<footer><a href="https://www.youtube.com/watch?v=Z_4TlZCvYL4">Video</a> by Leonard Lee</footer>

...because it contains =

  • the subtitles are very small. Why not add something like this to the CSS:
video::cue {
    font-size: 1rem;
}

...this would also demo how to style subtitles...

sheeeng added some commits May 23, 2018

Add muted attribute.
Remove invalid type attribute.
Enlarge substitle.
Add muted attribute.
Quote href attribute value.
@sheeeng

This comment has been minimized.

Contributor

sheeeng commented May 23, 2018

Thanks for the feedback, @wbamberg. Example updated.

@wbamberg

Looks great, thanks!

@wbamberg wbamberg merged commit 302d3b0 into mdn:master May 23, 2018

1 of 2 checks passed

continuous-integration/travis-ci/pr The Travis CI build is in progress
Details
security/snyk - package.json No dependency changes
Details

@sheeeng sheeeng deleted the sheeeng:add-track-example branch May 23, 2018

wbamberg added a commit to wbamberg/interactive-examples that referenced this pull request May 25, 2018

Merge remote-tracking branch 'upstream/master'
* upstream/master: (39 commits)
  Add video example. (mdn#939)
  Add track example. (mdn#940)
  Change `html` to `tabbed` in Publishing section (mdn#942)
  adding font-optical-sizing example (mdn#919)
  chore(deps): update dependency jest to v22.4.4 (mdn#935)
  fix(tabbed-editor): issue mdn#860, isolate CSS to output (mdn#927)
  Add img example. (mdn#923)
  Add <area> example (mdn#920)
  Add <map> example (mdn#931)
  Add HTML example for <audio> (mdn#930)
  chore(community): add @Regaddi as contributor (mdn#933)
  chore(community): add @stephanmax as contributor (mdn#932)
  Add HTML example for <summary> (mdn#926)
  Add HTML example for <details> (mdn#924)
  Fix example: issue mdn#925, add (max-)width to container and left-align text to see full effect (mdn#929)
  Add String trim examples (mdn#922)
  chore(deps): update dependency stylelint to v9.2.1 (mdn#928)
  Add example for week input (mdn#902)
  Add url input example (mdn#901)
  Add html input search (mdn#897)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment