HTML5 비디오, 오디오 플레이어- MediaElement.js happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 동영상 > HTML5 비디오, 오디오 플레이어- MediaElement.js 상세정보

클라우드태그

Javascript

PHP

ASP

CSS

html

mysql

jquery

image

API

Mobile

메뉴

slide

게시판

현재접속자 명

HTML5 비디오, 오디오 플레이어- MediaElement.js

해피팀

네티즌

소스분류

동영상

다운로드 횟수

0 회

간단설명

MediaElement.js는 HTML5 mediaelement API를 기반으로 하는 유연하고 강력한 jQuery/JavaScript 오디오 및 비디오 플레이어 플러그인입니다.

평가하기

MediaElement.js는 HTML5 mediaelement API를 기반으로 하는 유연하고 강력한 jQuery/JavaScript 오디오 및 비디오 플레이어 플러그인입니다 .

라이센스는 MIT 라이센스 입니다.

HTML5 의 VIDEO 태그를 기반으로 한 플레이어 입니다.

지원 포맷은 MP4, MP3, WebM은 물론 Dailymotion, Facebook , SoundCloud, Twitch, Vimeo, Youtube 등 거의 모든 오디오 및 비디오 포맷을 지원합니다.

압축 해제하시면 demo / index.html 파일이 있습니다.
해당 파일을 실행하시면 플레이어 화면 확인 가능 합니다.

Sources 부분을 보면 영상 주소를 플레이어에게 전달합니다.

<label>Sources
    <select name="sources">
        <option value="//github.com/mediaelement/mediaelement-files/blob/

master/big_buck_bunny.mp4?raw=true">MP4</option>
        <option value="//upload.wikimedia.org/wikipedia/commons/

2/22/Volcano_Lava_Sample.webm">WebM</option>
        <option value="https://bitdash-a.akamaihd.net/content/

MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8">HLS</option>
        <option value="https://dash.akamaized.net/akamai/

bbb_30fps/bbb_30fps.mpd">M(PEG)-DASH</option>
        <option value="https://www.dailymotion.com/video/x11prnt">

        DailyMotion</option>
        <option value="https://www.youtube.com/watch?v=twYp6W6vt2U">YouTube</option>
        <option value="https://player.vimeo.com/video/108018156?

title=0&amp;byline=0&amp;portrait=0&amp;badge=0">Vimeo</option>
        <option value="https://www.facebook.com/peopleareawesome/

videos/1542174665831706/">Facebook</option>
        <option value="https://www.twitch.tv/videos/109010497">Twitch</option>
    </select>
</label>

Sources 를 변경하면 연결된 이벤트에 의해 영상 주소만 설정주도록 데모가 구성되어 있습니다.

sourcesSelector[i].addEventListener('change', function () {
    var
        media = this.closest('.players').querySelector('.mejs__container').id,
        player = mejs.players[media]
    ;
    player.setSrc(this.value.replace('&amp;', '&'));
    player.load();
    if (!mejs.Features.isiOS && !mejs.Features.isAndroid) {
        player.play();
    }
    var renderer = document.getElementById(player.media.id + '-rendername');
    renderer.querySelector('.src').innerHTML = 

    '<a href="' + this.value + '" target="_blank">' + this.value + '</a>';
    renderer.querySelector('.renderer').innerHTML = player.media.rendererName;
    renderer.querySelector('.error').innerHTML = '';
});