MediaElement.js

 

---

 

https://www.mediaelementjs.com/ 

MediaElement.js - HTML5 video and audio unification framework

두 가지 방법으로 HTML 문서에서 불러 올수 있다.

(1) 문서 내 <audio> 또는 <video> tag 일괄 적용을 위한 스크립트 추가

<script>
document.addEventListener('DOMContentLoaded', loading);
function loading() {
	var mediaElements = document.querySelectorAll('video, audio');
	for (var i = 0, total = mediaElements.length; i < total; i++) {
		new MediaElementPlayer(mediaElements[i], {
				stretching: 'responsive',
				alwaysShowControls: true,
				startVolume: 1.0,
				// more configuration elements
		    });
	};
};		
</script>

(2) 스크립트 추가 없는 빠른 시작 방법이며, <audio> 또는 <video> tag내 클래스 이름을 class="mejs__player"로 지정하면 된다. 또한 data-mejsoptions을 통해 옵션 추가할 수 있다.

<div id="player-container"><audio class="mejs__player" controls preload="metadata" 
        data-mejsoptions='{"stretching": "responsive", "alwaysShowControls": "true", "startVolume": "1.0"}'> 
<source src="url.mp3" type="audio/mpeg"/></audio></div>

 

적용 예제 (오디오 UI)

 

---

오디오 플레이용 UI 적용 css (id로 정의됨)

#player-container .mejs__time-buffering,
#player-container .mejs__time-current,
#player-container .mejs__time-handle,
#player-container .mejs__time-loaded,
#player-container .mejs__time-marker,
#player-container .mejs__time-total,
#player-container .mejs__time-hovered {
    height: 2px;
}

#player-container .mejs__time-total {
    margin-top: 9px;
}
#player-container .mejs__time-handle {
    left: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    top: -5px;
    cursor: pointer;
    display: block;
    position: absolute;
    z-index: 2;
    border: none;
}
#player-container .mejs__time-handle-content {
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
}