비디오 컨텐츠 예시

skip navigation

비디오&플레이어

- 동영상 플레이어 스킨적용 케이스와 유투브 영상 케이스로 구분.
- 컨트롤영역(.video_controls)이 화면에서 사라지는 이벤트 적용 시에는 키보드 접근 시 노출이 되어야 합니다. 이에 따른 class명 및 css적용은 프로젝트 성향에 맞게 적용하시기 바랍니다.

플레이어

[VIEW]

00:10/ 00:00

자막영역

[CODE]

<div class="video_wrap"> <div class="video_player fl_l">  <div class="video_posi"> <div class="video_container"> <div> <button type="button" class="btn play"><span class="hide">동영상 제목 <span>재생</span></span>▶</button>   <img src="../../images/library/@thumnail_list.gif" alt=""> </div> <div style="display:none;"> <video src="#" tabindex="0" style="width: 100%;height: 100%;"> </video> </div> </div> <div class="video_controls">  <div class="progress_wrap"> <span style="width:20%"><button type="button" class="ui-vp-progress-button" style="display:none"><span class="hide">이동</span></button></span> </div> <button type="button" class="btn play"><span class="hide">동영상 제목 <span>재생</span></span>▶</button>  <button type="button" class="btn stop"><span class="hide">동영상 제목 정지</span>■</button> <div class="video_time"> <span class="now">00:10</span><span class="duration">/ 00:00</span> </div> <div class="volume_control"> <button type="button" class="btn mute"><span class="hide">동영상 제목 <span>음소거</span></span>음소거</button>  <span class="vol_wrap"> <span class="vol_bar"> <span class="vol_now" style="height:50%"> <button type="button"><span class="hide">동영상 제목 소리 조절 버튼</span></button> </span> </span> </span> </div> <button type="button" class="btn full"><span class="hide">동영상 제목 소리 <span>전체화면 보기</span></span>전체화면</button>   </div> </div>  </div> <div class="video_text fl_r" tabindex="0"> <p>자막영역</p> </div> </div>

유투브

[VIEW]

자막영역

[CODE]

<div class="video_wrap"> <div class="video_player fl_l">  <iframe id="utubePlay" width="487" height="257" frameborder="0" src="http://www.youtube.com/embed/IhvAkAtDqiU?rel=0&wmode=opaque&showinfo=0" title="스마트 아카데미 동영상"></iframe>  </div> <div class="video_text fl_r" tabindex="0"> <p>자막영역</p> </div> </div>