多媒體檢視器
找片段、調倍速,再看圖片細節<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>