mp4 리스트 동영상 게시판은 첨부파일을 올려서 그걸 읽는 방식보다는 다른 디렉토리에 동영상을 올리고 주소를 추출하여 소스를 작성하는 방식으로 만들었습니다.

왜냐하면 첨부파일로는 올라갈 수 없는 대용량 파일도 포함될 수 있기 때문입니다.

어쨌거나 mp4 동영상 리스트 플레이어는 두 가지 방법이 가능합니다.

[ 첫번째 방법 ]

1. 스킨을 다운로드 받아 설치합니다.

2. txt 파일로 소스를 작성해 줍니다. 아래처럼 작성합니다.

동영상 숫자는 몇개라도 상관 없이니 동일한 패턴으로 mrdiaList_번호 형식으로 기입힙니다.

mediaList_1 = ["1번mp4주소", "1번mp4정보"];
mediaList_2 = ["2번mp4주소", "2번mp4정보"];
mediaList_3 = ["3번mp4주소", "3번mp4정보"];
mediaGap = 4;
headImage = "상단이미지주소";
footImage = "하단이미지주소";

mediaGap 은 각 요소간의 간격 픽셀입니다.

상단이미지와 하단이미지는 사용하고 싶지 않으면 아래처럼 주석처리 합니다.

// headImage = "";
// footImage = "";

작성이 끝났으면 첫번째 첨부파일로 업로드 합니다. "땡"입니다.

수정사항이 발생하면 소스를 다시 txt 로 작성하거나 고쳐서 첨부파일을 바꿔줍니다.

동영상 아래에 본문내용을 첨가하고 싶으면 첨가하고 아니면 본문숨기기 체크하신 후 아무 글자나 넣어서 작성완료 눌러주세요.

이 스킨은 모바일 글쓰기를 허용하지 않습니다. 모바일 글쓰기를 하려면 디바이스를 pc 모드로 바꾸어서 작성해 주세요.

[ 두번째 방법 ]

자바스크립트 전용게시판 - https://sir.kr/g5_skin/45542 으로 작성합니다.

상단 부분만 위의 메모장 소스를 참고하여 고칠 부분만 고쳐주세요.

[code]

<script>
mediaList_1 = ["http://blog.jinbo.net/attach/7133/2175785934.mp4", "마마무 (MAMAMOO) - Decalcomanie (데칼코마니)"];
mediaList_2 = ["http://blog.jinbo.net/attach/7133/4078341425.mp4", "Faithless - Insomnia (Kapral Remix)"];
mediaList_3 = ["http://blog.jinbo.net/attach/7133/1653064732.mp4", "Dalshabet(달샤벳) - B.B.BI(비비비)(Big Baby Baby)"];
mediaList_4 = ["http://blog.jinbo.net/attach/7133/4785662507.mp4", "EXID - Hot Pink [Color coded Han Rom Eng lyrics]"];
mediaList_5 = ["http://blog.jinbo.net/attach/7133/2090555629.mp4", "GIRL'S DAY(걸스데이) - Something (Dance ver.)"];
mediaGap = 4;
headImage = "https://blog.kakaocdn.net/dn/Qlbbm/btq8wechKEh/lX1NqoSY0xS5mQ7q8qJoVk/img.jpg";
footImage = "https://blog.kakaocdn.net/dn/bjkleD/btq8yevGYKv/h92GBFxkRPFjfixZuO50P1/img.jpg";
</script>
<style>
@import url(http://cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css);
#titleTable { color:#000000; font-family:'Nanum Barun Gothic'; padding:12px; background-color:#d5e6f9; border:1px solid #cccccc; }
.listTd { color:#000000; font-family:'Nanum Barun Gothic'; padding:12px; text-align:center; cursor:pointer; }
</style>
<script>
for (mediaTotal = 0; this["mediaList_" + (mediaTotal + 1)]; mediaTotal++);
goMode = 1;
function playerMode() {
    playerDiv.innerHTML = "<video style=width:100%;display:block;margin-top:" + mediaGap + "px;margin-bottom:" + mediaGap + "px src=" + this['mediaList_' + (arguments[0])][0] + " controls autoplay controlsList=nodownload onended=mediaMode(goMode?'next':'prev')></video>";
    listTitle.innerHTML = "<strong>" + this['mediaList_' + (arguments[0])][1] + "</strong>";
    for (media = 1; media <= mediaTotal; media++) {
        if (media == mediaNumber) {
            this["listMedia_" + media].innerHTML = "<strong>" + this['mediaList_' + media][1] + "</strong>";
            this["listMedia_" + media].style.backgroundColor = '#f7d7e4'
        }
        else {
            this["listMedia_" + media].innerHTML = this['mediaList_' + media][1];
            this["listMedia_" + media].style.backgroundColor = '#eeeeee';
        }
    }
}
function mediaMode() {
    if (arguments[0] == 'next') playerMode(mediaNumber = mediaNumber == mediaTotal ? 1 : mediaNumber + 1), goMode = 1;
    else if (arguments[0] == 'prev') playerMode(mediaNumber = mediaNumber == 1 ? mediaTotal : mediaNumber - 1), goMode = 0;
    else playerMode(mediaNumber = arguments[0]);
}
</script>
<div id=mediaDiv>
    <div id=headSkin></div>
    <table id=titleTable style=width:100% cellpadding=0 cellspacing=0>
        <td style=text-align:left;cursor:pointer onclick=mediaMode('prev') onmouseover=style.color='#c00000' onmouseout=style.color='#000000'>◀◀</td>
        <td id=listTitle style=text-align:center></td>
        <td style=text-align:right;cursor:pointer onclick=mediaMode('next') onmouseover=style.color='#c00000' onmouseout=style.color='#000000'>▶▶</td>
    </table>
    <div id=playerDiv oncontextmenu='return false' onselectstart='return false' ondragstart='return false'></div>
    <table id=listTable style=width:100%;background-color:#cccccc cellpadding=0 cellspacing=1>
        <script>
        for (media = 1; media <= mediaTotal; media++) {
            document.write("<tr><td id=listMedia_" + media + " class=listTd></td></tr>");
            this["listMedia_" + media].listNumber = media;
            this["listMedia_" + media].onclick = function() { mediaMode(this.listNumber); }
            this['listMedia_' + media].onmouseover = function() { this.style.color = '#c00000'; }
            this['listMedia_' + media].onmouseout = function() { this.style.color = '#000000'; }
        }
        titleTable.style.fontSize = listTable.style.fontSize = ("win16win32win64macmacintel").indexOf(navigator.platform.toLowerCase()) < 0 ? '12px' : '16px';
        </script>
    </table>
    <div id=footSkin></div>
    <script>
    if (typeof headImage != "undefined") headSkin.innerHTML = "<img src=" + headImage + " style=width:100%;display:block;margin-bottom:" + mediaGap + "px>";
    if (typeof footImage != "undefined") footSkin.innerHTML = "<img src=" + footImage + " style=width:100%;display:block;margin-top:" + mediaGap + "px>";
    listMedia_1.onclick();
    </script>
</div>

[/code]

주의사항 : 동영상은 트래픽에 민감합니다. 제 동영상 주소를 숨은 글에서 사용하는 건 상관없지만 버젓이 공개로 올려놓는 일은 삼가해 주시기 바랍니다. 코드를 가져가시는 건 괜찮지만 트래픽까지 가져가시는 일은 없었으면 합니다.

도움이 되셨으면 좋아요 추천과 댓글 한마디 부탁 드릴게요.