카페24 호스팅 video 태그 작동 안됨

카페24 호스팅 video 태그 작동 안됨

QA

카페24 호스팅 video 태그 작동 안됨

본문

안녕하세요

제목처럼, 카페24 호스팅 중 video태그가 작동하지 않습니다.

10G 광아우토반 FullSSD+로 호스팅만 신청하였고, 로컬 호스트에서 확인 할 때는 문제 없이 video태그가 작동하였습니다.

구현하고자하는 것의 문제로 iframe 태그는 사용 할 수가 없어서 꼭 video태그가 작동해야 합니다.

서치해보니 카페24의 문제라는데, 어떻게 해결 할 수 있는지 모르겠습니다.

이 질문에 댓글 쓰기 :

답변 7

또는 mp4 인코딩의 문제일 수도 있습니당!

맞아요. 그 문제도 이슈가 있더라구요. 웬만해서는 되는데 (태그가 하나밖에 안되어서), 만약에 표준 MP4코드가 아니면 재생불가할수도 있으니, 인터넷에 떠 다니는거 다운로드 받아서 해보시면 알겠네요.

아까는 밖에 나가느라 짧게 달았는데,
제 경우, mp4 엔코더가 mpeg 로 되어 있을 경우에는 안드로이드에서만 재생이 되었었어요.
엔코더로 libx264 를 선택해서 변환하면 IOS/ANDROID 모두 재생이 되었구요.

그 외의 방법으로는,
요로코롬 각각 source 를 지정해주고
지원되는 브라우저에서 선택하여 재생하게 하는 방법이 있겠어요.


<video controls playsinline muted autoplay>
    <source src="../movie.mp4" type="video/mp4">
    <source src="../movie.ogg" type="video/ogg">
</video>


# 옵션
- controls : 재생기 노출
- playsinline : ios 에서 그자리에서 재생되기(팝업 X, IOS 에서는 이 옵션이 없으면 전체화면으로 처리됩니다).
- muted : 음소거 (여야지 자동 재생 옵션 실행됨)
- autoplay: 자동 재생
- loop: 반복재생
- 배터리 부족할때는 자동 재생 안됨.


# 참조 URL
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source
- https://www.w3schools.com/tags/tag_video.asp


# 기타
파일명 모두 소문자로 시도도 해보세요 (요게 의심되기도 하네요)

오류 나는 코드를 보여주세요..


<div class="video-container">
        <video muted autoplay>
            <source src="../video/WinbowsBulb.MP4" type="video/mp4">
        </video>
    </div>

video 태그를 사용하는 것은 딱 이 부분 뿐 입니다. body태그 안에 들어가있으며, 따로 특별한 css나 js 같은 것도 없습니다. 상대경로이고, 경로도 몇번을 확인했으나 틀리지 않습니다.


    .video-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        /* 비디오를 div id ="overlay" 아래로 위치시키는 용도. */
    }

    video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

css는 이게 전부 입니다.

안녕하세요.

카페24 10G 광아우토반 FullSSD+로 호스팅 사용중인데  video태그가 문제없이 동작하고 있습니다.

코드상의 오류가 있는걸로 보입니다~

혹시몰라 따로 video태그만 때서 새 파일을 만들어 적용시켜보았는데도 video 태그 자체가 작동하고 있지 않은 것을 확인했습니다.
에러코드는 따로 뜨는 것이 없고, css로 width: 100%; height: 100%;를 주어 크기가 0인 것도 아닙니다.
확장자는 mp4와 AVI로 시도해보았는데, 결과가 같았습니다.

카페24에서 단독웹호스팅으로 저는 잘 구현했는데, 아이폰에서 계속 안되어서 보니, 아이폰에 절전기능이 있으면 절대 mp4 재생이 안됩니다. 이거때문에 막판에 무지애먹음..결론은 아이폰 절전모드탓 !!!

카페24 일반형에서도 잘 구현되는데요? 브라우저 설정상의 문제일 것 같네요. 
혹시 모바일에서 자동재생이 안된다면 
muted autoplay playsinline loop 
옵션값을 이렇게 해보세요.

안드로이드에서는 muted만 있어도 무음으로 자동재생이 되는데
아이폰에서는 playsinline가 있어야 자동재생 될 거예요.

<video muted autoplay playsinline loop>

저도 비슷한 현상이 있었는데
 

mp4, mov 등

편집툴로 올리지않고 filezila를 통해서 올리니 해결했었습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 171
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT