카페24 호스팅 video 태그 작동 안됨 채택완료
안녕하세요
제목처럼, 카페24 호스팅 중 video태그가 작동하지 않습니다.
10G 광아우토반 FullSSD+로 호스팅만 신청하였고, 로컬 호스트에서 확인 할 때는 문제 없이 video태그가 작동하였습니다.
구현하고자하는 것의 문제로 iframe 태그는 사용 할 수가 없어서 꼭 video태그가 작동해야 합니다.
서치해보니 카페24의 문제라는데, 어떻게 해결 할 수 있는지 모르겠습니다.
답변 7개
답변에 대한 댓글 3개
제 경우, mp4 엔코더가 mpeg 로 되어 있을 경우에는 안드로이드에서만 재생이 되었었어요.
엔코더로 libx264 를 선택해서 변환하면 IOS/ANDROID 모두 재생이 되었구요.
그 외의 방법으로는,
요로코롬 각각 source 를 지정해주고
지원되는 브라우저에서 선택하여 재생하게 하는 방법이 있겠어요.
[code]
<video controls playsinline muted autoplay>
<source src="../movie.mp4" type="video/mp4">
<source src="../movie.ogg" type="video/ogg">
</video>
[/code]
# 옵션
- 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
# 기타
파일명 모두 소문자로 시도도 해보세요 (요게 의심되기도 하네요)
정말 감사드립니다.
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
카페24 일반형에서도 잘 구현되는데요? 브라우저 설정상의 문제일 것 같네요.
혹시 모바일에서 자동재생이 안된다면
muted autoplay playsinline loop
옵션값을 이렇게 해보세요.
안드로이드에서는 muted만 있어도 무음으로 자동재생이 되는데
아이폰에서는 playsinline가 있어야 자동재생 될 거예요.
<video muted autoplay playsinline loop>
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
카페24에서 단독웹호스팅으로 저는 잘 구현했는데, 아이폰에서 계속 안되어서 보니, 아이폰에 절전기능이 있으면 절대 mp4 재생이 안됩니다. 이거때문에 막판에 무지애먹음..결론은 아이폰 절전모드탓 !!!
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
안녕하세요.
카페24 10G 광아우토반 FullSSD+로 호스팅 사용중인데 video태그가 문제없이 동작하고 있습니다.
코드상의 오류가 있는걸로 보입니다~
답변에 대한 댓글 1개
에러코드는 따로 뜨는 것이 없고, css로 width: 100%; height: 100%;를 주어 크기가 0인 것도 아닙니다.
확장자는 mp4와 AVI로 시도해보았는데, 결과가 같았습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 2개
<div class="video-container">
<video muted autoplay>
<source src="../video/WinbowsBulb.MP4" type="video/mp4">
</video>
</div>
[/code]
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;
}
[/code]
css는 이게 전부 입니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인