Challenge: Fill the background with looping video

Contents

• Introduction Introduction

  • Build interactive audio and video into your websites and applications

    56s
  • What you should know

    1m 7s
  • Use the exercise files

    48s
  • What's new in this update

    27s
• 1. Get Started with Web-Based Media 1. Get Started with Web-Based Media

  • Set up your environment

    1m 53s
  • Create a new document

    2m 3s
  • Link to media content

    4m 36s
  • Use embedded media

    2m 5s
  • Challenge: Remove the iframe border

    23s
  • Solution: Remove the iframe border

    54s
• 2. Work with Audio Elements 2. Work with Audio Elements

  • Modify your document for audio

    3m 9s
  • Specify an audio source

    1m 30s
  • Specify multiple audio sources

    3m 7s
  • Include fallback content

    1m 21s
  • Additional audio attributes

    3m 36s
  • Challenge: Increase audio accessibility with tags

    23s
  • Solution: Increase audio accessibility with tags

    1m 5s
• 3. Work with Video Elements 3. Work with Video Elements

  • Modify your document for video

    1m 3s
  • Specify height and width

    1m 38s
  • Use a poster image

    2m 11s
  • Media accessibility

    3m 10s
  • Challenge: Fill the background with looping video

    25s
  • Solution: Fill the background with looping video

    2m 15s
• 4. Create Media Playback Controls 4. Create Media Playback Controls

  • Disable default media controls

    1m 32s
  • Add playback buttons

    1m 53s
  • Include text elements

    2m 29s
  • Create a progress bar

    1m 26s
  • Challenge: Overlay the media controls

    25s
  • Solution: Overlay the media controls

    1m 37s
• 5. Style Media Playback Controls 5. Style Media Playback Controls

  • Define CSS styles in a document

    1m 35s
  • Design your buttons

    3m 30s
  • Style your text

    5m 2s
  • Design your progress bar

    5m 13s
  • Challenge: Use web fonts

    25s
  • Solution: Use web fonts

    1m 48s
• 6. Work with the Media API 6. Work with the Media API

  • Overview of media API

    3m 29s
  • Listen for Media events

    4m 58s
  • Program button controls

    1m 23s
  • Dynamic time display

    4m 17s
  • Wire up the progress bar

    4m 45s
  • Challenge: Show and hide the controls

    26s
  • Solution: Show and hide the controls

    2m 19s
• Conclusion Conclusion

  • Further information

    36s