├── README.md ├── css └── base.css ├── media ├── audio.mp3 ├── audio.ogg ├── poster.png ├── video.mp4 ├── video.ogv └── video.webm └── mediaplayer.html /README.md: -------------------------------------------------------------------------------- 1 | ## Build a Media Player with HTML 2 | 3 | Hi! 4 | 5 | If you've stumbled upon this, you've most likely found my SitePoint post. Yipee! 6 | 7 | Ok, so let's get started and build a media player with HTML. This is only the start of this example and you can develop it further with CSS and JavaScript. I can show you how, but that's all part of my course Getting Started with HTML Media on Learnable. 8 | 9 | If you liked this lesson then I would highly recommend going to Learnable and checking it out. 10 | 11 | Happy Learning! -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | -webkit-box-sizing: border-box; 5 | -moz-box-sizing: border-box; 6 | box-sizing: border-box; 7 | } 8 | 9 | .media { 10 | width: 60em; 11 | margin: 2em auto; 12 | } 13 | 14 | audio, video { 15 | vertical-align: middle; 16 | } -------------------------------------------------------------------------------- /media/audio.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnable-content/build-a-media-player-html/86bc8d6bc74ecb520e42858afcbeb16de21fa22f/media/audio.mp3 -------------------------------------------------------------------------------- /media/audio.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnable-content/build-a-media-player-html/86bc8d6bc74ecb520e42858afcbeb16de21fa22f/media/audio.ogg -------------------------------------------------------------------------------- /media/poster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnable-content/build-a-media-player-html/86bc8d6bc74ecb520e42858afcbeb16de21fa22f/media/poster.png -------------------------------------------------------------------------------- /media/video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnable-content/build-a-media-player-html/86bc8d6bc74ecb520e42858afcbeb16de21fa22f/media/video.mp4 -------------------------------------------------------------------------------- /media/video.ogv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnable-content/build-a-media-player-html/86bc8d6bc74ecb520e42858afcbeb16de21fa22f/media/video.ogv -------------------------------------------------------------------------------- /media/video.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnable-content/build-a-media-player-html/86bc8d6bc74ecb520e42858afcbeb16de21fa22f/media/video.webm -------------------------------------------------------------------------------- /mediaplayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Media Player HTML 6 | 7 | 8 | 9 | 10 |
11 | 12 | 22 | 23 |
24 | 25 |
26 | 27 | 31 | 32 |
33 | 34 | 35 | --------------------------------------------------------------------------------