MP4 동영상에 프로그레스바 기능 추가하기.(추가수정)

사이트에 엄청 추가하고싶었던 기능이었습니다. 코딩실력이 부족해서 복붙정도만 가능한 수준이라

포기하고있던참에 chat gpt 도움을 받아 기능을 추가했습니다. 다른분들은 필요할지 잘모르겠지만

정보를 공유해봅니다. 짧은 동영상 관련된 홈페이지에서 사용하면 좋을거같습니다. 

이제 코어는 건드리지 않아도 됩니다. 1번은 무시하셔도됩니다.

기진곰님의 답변을 참고해서 스크립트만으로 수정하였습니다.

이렇게 하면 홈페이지에 올려놨던 기존 모든 동영상도 기능을 활용할수있게됩니다.

기존에는 새로 업로드된 동영상만 가능했었습니다.

1. common/js/plugins/jquery.fileupload/js/main.js 에서 수정합니다.

 
    else if(/\.(mp4|webm|ogv)$/i.test(result.source_filename) && opt.autoinsertTypes.video) {
        if(result.original_type === 'image/gif') {
            temp_code += '<video src="' + result.download_url + '" autoplay loop muted playsinline data-file-srl="' + result.file_srl + '" ></video>';
            temp_code += '<div class="trackBar"></div>'; // 트랙바 추가
        } else if (result.download_url.match(/\b(?:procFileDownload\b|files\/download\/)/)) {
            if (!result.download_url.match(/^\//)) {
                result.download_url = XE.URI(default_url).pathname() + result.download_url;
            }
            temp_code += '<video src="' + result.download_url + '" controls preload="none" data-file-srl="' + result.file_srl + '" ></video>';
            temp_code += '<div class="trackBar"></div>'; // 트랙바 추가
        } else {
            temp_code += '<video src="' + result.download_url + '" controls data-file-srl="' + result.file_srl + '" ></video>';
            temp_code += '<div class="trackBar"></div>'; // 트랙바 추가
        }
        if(result.thumbnail_filename) {
            temp_code = temp_code.replace('controls', 'poster="' + result.thumbnail_filename.replace(/^.\//, XE.URI(default_url).pathname()) + '" controls');
        }
    }

    if(temp_code !== '') {
        // <p> 태그로 감싸기 전에 <div>를 임시로 저장합니다.
        let tempDivCode = '<div>' + temp_code + '</div>';
        if (opt.autoinsertPosition === 'paragraph') {
            // <div> 태그를 <p> 태그로 감싸고 다시 temp_code에 저장합니다.
            temp_code = "<p>" + tempDivCode + "</p>\n";
        } else {
            // <div> 태그를 <p> 태그로 감싸지 않고 temp_code에 그대로 저장합니다.
            temp_code = tempDivCode;
        }
        try {
            _getCkeInstance(settings.formData.editor_sequence).insertHtml(temp_code, "unfiltered_html");
        }
        catch(err) {}

2. html에 자바스크립트를 추가해줍니다.

<script>
    const videos = document.querySelectorAll('video');
    videos.forEach((player, index) => {
        const spacer = document.createElement('div');
        spacer.innerHTML = '&nbsp;';      //동영상이 여러개 첨부될 경우 가독성을위해 한줄 띄우기
        player.parentNode.insertBefore(spacer, player.nextSibling);

        const trackBar = document.createElement('div');
        trackBar.classList.add('trackBar');
        player.parentNode.insertBefore(trackBar, player.nextSibling);

        setInterval(() => {
            trackBar.style.width = (player.currentTime / player.duration * player.offsetWidth) + "px";
        }, 100);
    });
</script>

3. CSS를 추가해줍니다.

.trackBar {
        background-color: #c00000c2;
        height: 10px;
        width: 0;
        position: relative;
        margin: -6px 2px 0px 0px;
    }

4. 라이믹스의 시스템설정 - 보안설정 html class 허용에서 trackBar 추가합니다. 

결과물

참고자료 : https://sir.kr/g5_tip/18499
참고자료 : https://xetown.com/tips/1690576
참고자료 : chat gpt 3.5

서버환경
php 버전 7.4 
라이믹스 버전 2.0.13