Multimedia viewer
Multimedia viewer
Find the moment. Look closer at the picture.
Use one set of controls for videos, photos and mixed galleries in articles or shared posts. Seek to a moment, change playback speed, or open a picture when its details matter.
Seeking, speed and a closer look<div class="project-demo" data-project-demo data-animation="/images/previews/07b26c7765f096d08d348075430c451e0776fb81039e2e71a09a7c5e76636949.mp4" data-play="Play demo" data-resume="Continue demo" data-pause="Pause demo" data-replay="Replay demo" data-loading="Loading demo…" data-error="The walkthrough could not load. Please try again."><div class="project-demo-media"><img src="/images/responsive/a97b2887a179599df11bdf109af5fd5857e834473db10e3dd468a15a2c9f7e4a.webp" alt="Seeking, speed and a closer look" loading="lazy" decoding="async" data-original="/images/previews/media-videojs10.6ae2ad98bbba3869.webp" srcset="/images/responsive/a97b2887a179599df11bdf109af5fd5857e834473db10e3dd468a15a2c9f7e4a.webp 400w, /images/responsive/893f77e5696e44a825552eb9418dceee32f9256e31fbe45cffed366b52559166.webp 800w, /images/responsive/77383b487348ecea893985f0eca289be9701b7b6cf83e4821299e998abf197bd.webp 1200w" sizes="(max-width: 620px) calc(100vw - 32px), (max-width: 900px) calc((100vw - 72px) / 2), 560px" width="400" height="250"><video muted playsinline preload="none" hidden aria-label="Seeking, speed and a closer look"></video></div><button type="button" data-demo-toggle aria-pressed="false" aria-label="Play demo: Seeking, speed and a closer look">Play demo</button><input name="edgepress-demo-seek-1" class="project-demo-seek" data-demo-seek type="range" min="0" max="1" value="0" step="0.1" disabled aria-label="Demo progress: Seeking, speed and a closer look"><span class="project-demo-time" data-demo-time>0:00 / 0:00</span><span class="project-demo-status" role="status"></span></div>
Seeking, speed and a closer look
Watch the playhead move after a drag and the clock advance at 2×. Then switch to the photo, open its original and zoom into the details.
In your page
A player that fits the page
The colors follow your theme; time and playback controls remain visible on a phone.
One gallery for both kinds of media
Move between photos and video without mounting every attachment at once.
Open details when you need them
The original loads when the viewer opens. Zoom, pan and close to return to the page.
Related reading
Video at your pace, pictures in detail
PinnedThe seek bar occupies its own row. Current time and total duration remain together; dragging moves to a real position. The demonstration pauses to show the resulting timestamp and the selected 2× playback rate.
<figure class="media-viewer-block" data-edgepress-media-viewer><figcaption>Insert a multimedia viewer in Pages</figcaption><div class="media-gallery"><div class="gallery-stage" tabindex="0"></div><template><figure><img data-media src="/images/responsive/a97b2887a179599df11bdf109af5fd5857e834473db10e3dd468a15a2c9f7e4a.webp" alt="Seeking, speed and a closer look" decoding="async" data-original="/images/previews/media-videojs10.6ae2ad98bbba3869.webp" srcset="/images/responsive/a97b2887a179599df11bdf109af5fd5857e834473db10e3dd468a15a2c9f7e4a.webp 400w, /images/responsive/893f77e5696e44a825552eb9418dceee32f9256e31fbe45cffed366b52559166.webp 800w, /images/responsive/77383b487348ecea893985f0eca289be9701b7b6cf83e4821299e998abf197bd.webp 1200w" sizes="(max-width: 620px) calc(100vw - 32px), (max-width: 900px) calc((100vw - 72px) / 2), 560px" width="400" height="250"></figure></template><template><figure><video playsinline preload="none" data-source="/images/previews/07b26c7765f096d08d348075430c451e0776fb81039e2e71a09a7c5e76636949.mp4" data-type="native" aria-label="Seeking, speed and a closer look" poster="/images/previews/media-videojs10.6ae2ad98bbba3869.webp"></video></figure></template><div class="gallery-navigation" hidden><button type="button" data-previous></button><span class="gallery-count" role="status" aria-live="polite"></span><button type="button" data-next></button></div></div><noscript><p>The document could not be previewed. Check its URL, access and CORS.</p></noscript></figure>