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

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
카페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를 통해서 올리니 해결했었습니다.

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

회원로그인

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