HTML 훈련 - (14) Video Player

Video Player

 

Video Player 

Video Player 

 

video 태그로 마크업 하는 방법.

 

 

 

방법1.

 

<video src="비디오.mov"></video>

 

이 방법으로는 만약 해당 파일이 재생이 안된다면, 영상이 재생되지 않는다.

만약 사용자의 브라우저가 mov 형식을 지원하지 않는다면 ? - 재생 안됨!

 

 

따라서, 사용자 친화적인 마크업을 위해서는 아래 방법대로 source 태그를 사용한다.

 

 

방법2.

 

<video>
    <source src="비디오.mov" type="video/mp4"/>
</video>

 

** source 태그의 필수 속성 = src / type

 

 

오디오든 비디오는 source를 사용할 때는, type을 꼭 명시해야함.

 

예> <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">

<source src="/examples/media/sample_audio_mp3.mp3" type="audio/mpeg">

 

 

---

<video>
    <source src="비디오.mov" type="video/mp4"/>
    <source src="비디오.mp4" type="video/mp4"/>
</video>

 

위와 같이 마크업 해주고, 나머지 헤딩과 내용부분을 마크업하자.

 

 

<h1>
    주짓수 4주차 롤링 영상
</h1>
<p>
    30초 만에 압살 실화인가 
</p>

 

 

그리고, css 적용을 위해서 div로 분할해줌.

 

 

• video 또한 플레이어를 나타나게 하기 위해
• controls라는 속성을 적어줌.

 

 

<div class="video-player">
    <div class="video-container">
        <video controls>
            <source src="assets/kimbug-bjj.mov" type="video/mp4"/>
            <source src="assets/kimbug-bjj.mp4" type="video/mp4"/>
        </video>
    </div>

    <div class="video-player-info">
        <h1>
            주짓수 4주차 롤링 영상
        </h1>
    
        <p>
            30초 만에 압살 실화인가 
        </p>
    </div> 
</div>

 

비디오의 디자인을 위한 클래스 지정은 위에 대로 하는것이 관례적임.

- 그대로 따라하면 됨.

 

 

 

 

---

 

 

style.css의 코드 분석은 아래 포스팅에.

 

 

https://mywebproject.tistory.com/123

html_pr14) style.css Code Review

 

---

REFERENCE (style.css)

https://github.com/rohjs/bugless-101/tree/master/html-practice/14-video-player

 

 

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

강의내용 (X)
github 코드 위주로 작성하였습니다.

추후 비공개 처리 예정,