오늘 배운 것: 모든 것에 딥링크하는 법

TL;DR

• 동영상의 특정 구간을 가리키는 미디어 프래그먼트 URI(Media Fragments URI) 구문으로 주요 브라우저 사용자 97~99%에게 특정 장면 링크를 제공할 수 있음.
• PDF의 특정 페이지는 #page=n 구문으로 가리킬 수 있음.
• MP4 동영상은 #t=시작시간,종료시간 구문으로 재생 구간을 지정할 수 있음.
• 시작 시간이나 종료 시간만 지정할 수 있으며, 시간 표기는 초 또는 시·분·초 형식으로 작성할 수 있음.
• 같은 구간 지정 방식은 오디오 파일에도 적용되며, SVG 자르기도 가능함.

PDF 페이지에 연결하기

• 블로그 글을 조사하던 중 공공 예술 작품에 관한 PDF의 마지막 페이지를 가리킬 필요가 있었으며, #page=n 구문으로 쉽게 해결함.

동영상의 특정 구간에 연결하기

• 1935년 마르크스 형제 영화에서 약 30초 분량의 특정 장면을 찾으려 했지만, 해당 장면이 잘려 유튜브에 올라온 영상은 없었고 찾으려던 장면 자체도 발견하지 못함.
• 대신 Internet Archive에서 조건에 맞는 장면이 담긴 MP4 파일을 발견했으며, MP4의 특정 구간에도 링크를 걸 수 있음을 확인함.
• 이 기능은 2012년 W3C 권고안인 Media Fragments URI 1.0 (basic)에 기반하며, CanIUse에 따르면 주요 브라우저 전반에서 지원되고 사용자 기준 지원률은 97~99%임.

시간 구간 지정 구문

• 기본 구문은 https://example.com/video.mp4#t=startTime,endTime이며, 물음표가 아니라 해시 기호(#)를 사용함.
• 시작 시간과 종료 시간을 모두 지정하는 예시는 다음과 같음: https://dn721608.ca.archive.org/0/items/a-night-at-the-opera-1935-HD/A Night at the Opera.mp4#t=250,285
• 시작 시간만 지정해 해당 시점부터 재생하는 예시는 다음과 같음: https://dn721608.ca.archive.org/0/items/a-night-at-the-opera-1935-HD/A Night at the Opera.mp4#t=250,
• 종료 시간만 지정해 해당 시점까지 재생하는 예시는 다음과 같음: https://dn721608.ca.archive.org/0/items/a-night-at-the-opera-1935-HD/A%20Night%20at%20the%20Opera.mp4#t=,285
• 시작 시간과 종료 시간을 모두 지정해 구간을 재생하는 예시는 다음과 같음: https://dn721608.ca.archive.org/0/items/a-night-at-the-opera-1935-HD/A Night at the Opera.mp4#t=250,285
• 시간은 일반 정수로 초 단위로 표시하거나 hh:mm, hh:mm:ss 형식으로 표시할 수 있으며, 특이하게 h:mm:ss 형식도 사용할 수 있음.
• 많은 동영상 플레이어가 현재 재생 위치를 시·분 단위로 표시하므로 시·분·초 형식이 더 편리할 수 있음.
• 시간 형식의 예시는 다음과 같음: https://www.autodidacts.io/content/media/2026/09/2026-09-24-copy-all-tabs-urls-firefox.webm#t=00:00:04,00:00:05

오디오와 SVG

• 이 구간 지정 방식은 오디오 파일에도 적용됨.
• SVG 이미지도 자를 수 있음.

더 알아보기

• MDN의 더 상세하고 다소 부담스러운 문서를 참고할 수 있음.
• 플레이그라운드도 두 곳 확인할 수 있음: 링크, 링크!