HTML에서 미디어 파일의 URL을 지정하려면 src(source) 속성을 사용합니다. 이 속성은 해당 요소가 재생하거나 표시할 외부 리소스의 경로를 브라우저에 알려주는 역할을 합니다. 아래 예제 코드를 직접 실행해 보면 src 속성이 실제로 어떻게 동작하는지 쉽게 확인할 수 있습니다.
src 속성은 다음과 같은 HTML 요소들과 함께 사용할 수 있습니다: <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, 그리고 <video>.
예제
<!DOCTYPE HTML> <html> <body> <video width = "300" height = "200" controls autoplay> <source src = "/html5/foo.ogg" type = "video/ogg" /> <source src = "/html5/foo.mp4" type = "video/mp4" /> Your browser does not support the video element. </video> </body> </html>
코드 설명
위 예제에서는 <video> 요소 안에 두 개의 <source> 태그를 배치했습니다. 첫 번째 <source>는 OGG 형식의 비디오 파일을 가리키고, 두 번째 <source>는 MP4 형식의 파일을 가리킵니다. 브라우저는 나열된 순서대로 파일을 확인하며, 자신이 지원하는 첫 번째 형식을 자동으로 선택해 재생합니다.
만약 브라우저가 비디오 요소 자체를 지원하지 않는 경우에는 <video> 태그 내부에 작성된 대체 텍스트("Your browser does not support the video element.")가 화면에 표시됩니다. 또한 controls 속성은 재생·일시정지 등의 컨트롤 바를 표시하고, autoplay 속성은 페이지가 로드되는 즉시 비디오가 자동으로 재생되도록 설정합니다.