多媒体查看器
找片段、调倍速,再看图片细节<div class="project-demo" data-project-demo data-animation="/images/previews/07b26c7765f096d08d348075430c451e0776fb81039e2e71a09a7c5e76636949.mp4" data-play="播放演示" data-resume="继续播放" data-pause="暂停演示" data-replay="重新播放" data-loading="正在加载演示…" data-error="演示暂时无法加载,请重试。"><div class="project-demo-media"><img src="/images/responsive/a97b2887a179599df11bdf109af5fd5857e834473db10e3dd468a15a2c9f7e4a.webp" alt="找片段、调倍速,再看图片细节" 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="找片段、调倍速,再看图片细节"></video></div><button type="button" data-demo-toggle aria-pressed="false" aria-label="播放演示: 找片段、调倍速,再看图片细节">播放演示</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="演示进度: 找片段、调倍速,再看图片细节"><span class="project-demo-time" data-demo-time>0:00 / 0:00</span><span class="project-demo-status" role="status"></span></div>
找片段、调倍速,再看图片细节
拖动后看播放位置如何变化,切到 2 倍速后看时间如何前进。再换到照片,打开原图,放大并拖动查看。
放进自己的页面
播放器跟着页面走
配色沿用当前主题,手机上也能看清时间和操作控件。
图片和视频放在同一画廊
切换时只加载当前附件,不必一次挂载所有播放器。
想看细节时,再开原图
打开查看器才加载原图;放大、拖动,看清后关闭回到文章。
相关用法
按自己的节奏看视频,看清图片细节
置顶进度条独立一行,当前时间与总时长放在一起。拖动跳到实际播放位置。演示会停留显示跳转后的时间,以及已选中的 2 倍速,让播放变化看得清楚。
<figure class="media-viewer-block" data-edgepress-media-viewer><figcaption>在 Pages 插入多媒体查看器</figcaption><div class="media-gallery"><div class="gallery-stage" tabindex="0"></div><template><figure><img data-media src="/images/responsive/a97b2887a179599df11bdf109af5fd5857e834473db10e3dd468a15a2c9f7e4a.webp" alt="找片段、调倍速,再看图片细节" 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="找片段、调倍速,再看图片细节" 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>暂时无法预览。请检查文档地址、访问权限及 CORS。</p></noscript></figure>