Syncing Multiple Media Elements Together Until the advent of media controllers, ensuring that two or more videos played at precisely the same time was a challenging endeavor.
Media controllers let you group any number of audio and/or video elements so that they can be managed by a universal set of controls, and also so that they can be kept in perfect sync, even if a network hiccup occurs.
To create a media controller, simply add the mediagroup attribute to all of the elements you wish to sync together. The value you choose to assign to mediagroup is up to you—as long as the value is the same for each slaved element, a media controller will be created implicitly.
Most of the same functions, attributes, and events available to audio and video elements are also available to media controllers. Instead of calling play() or pause() directly on the video itself, you call them on the media controller.
Note: Two attributes that aren’t supported by media controllers are loop and auto-play.
If one video stalls or stutters, the other videos will automatically pause to wait for the lagging video to catch up. When the video buffers and is ready to play, the remaining videos will resume in sync.
And you can find this doc here: Safari HTML Audio Video Guide