카페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로 시도해보았는데, 결과가 같았습니다.
<video src="../video/WinbowsBulb.MP4" autoplay loop muted></video>
카페24에서 단독웹호스팅으로 저는 잘 구현했는데, 아이폰에서 계속 안되어서 보니, 아이폰에 절전기능이 있으면 절대 mp4 재생이 안됩니다. 이거때문에 막판에 무지애먹음..결론은 아이폰 절전모드탓 !!!
pc환경에서 동영상 재생을 원하며, 테스트로 pc환경에서 크롬으로 진행 했습니다.
카페24 일반형에서도 잘 구현되는데요? 브라우저 설정상의 문제일 것 같네요.
혹시 모바일에서 자동재생이 안된다면
muted autoplay playsinline loop
옵션값을 이렇게 해보세요.
안드로이드에서는 muted만 있어도 무음으로 자동재생이 되는데
아이폰에서는 playsinline가 있어야 자동재생 될 거예요.
<video muted autoplay playsinline loop>
따로 루프 할 필요는 없고, 페이지 로드 시 딱 한번만 나오면 되는 인트로 동영상 입니다. 모바일이 아닌 pc환경의 크롬에서부터 작동이 되질 않고있습니다.
저도 비슷한 현상이 있었는데
mp4, mov 등
편집툴로 올리지않고 filezila를 통해서 올리니 해결했었습니다.
저도 filezila 사용 중입니다. 호스트만 신청하였기 때문에 편집툴은 사용하지 않습니다.