Advanced HTML5 Media Controllers in Safari

With HTML5, embedding audio or video in a web page can be as simple as adding a single line of code. Go beyond the basics and learn the best practices for implementing custom media controls that match the look and feel of your website. Discover how to use JavaScript to add custom play and pause buttons, volume controls, a timeline, a fullscreen button, and see how to display custom controls when video plays fullscreen. Find out tips for optimizing the look and feel of custom media controls for Safari on the desktop, and for the touch-enabled, zoomable interface of Safari on iPhone, iPad, and iPod touch.

WWDC 2011 - iOS, macOS