테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

카페24 호스팅 video 태그 작동 안됨 채택완료

YourVoid 2년 전 조회 13,352
답변 7
목록

안녕하세요

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

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

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

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

#html #카페24 #video #iframe #서버호스팅
댓글을 작성하려면 로그인이 필요합니다.

답변 7개

채택된 답변
+20 포인트
고

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

t
techstar
2년 전
맞아요. 그 문제도 이슈가 있더라구요. 웬만해서는 되는데 (태그가 하나밖에 안되어서), 만약에 표준 MP4코드가 아니면 재생불가할수도 있으니, 인터넷에 떠 다니는거 다운로드 받아서 해보시면 알겠네요.
�
고원에서온망고
2년 전
아까는 밖에 나가느라 짧게 달았는데,
제 경우, 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


# 기타
파일명 모두 소문자로 시도도 해보세요 (요게 의심되기도 하네요)
Y
YourVoid
2년 전
파일명을 소문자로 바꾸니 해결되었습니다.
정말 감사드립니다.

댓글을 작성하려면 로그인이 필요합니다.

바

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

mp4, mov 등

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

Y
YourVoid
2년 전
저도 filezila 사용 중입니다. 호스트만 신청하였기 때문에 편집툴은 사용하지 않습니다.

댓글을 작성하려면 로그인이 필요합니다.

니얼바이웹

카페24 일반형에서도 잘 구현되는데요? 브라우저 설정상의 문제일 것 같네요.  혹시 모바일에서 자동재생이 안된다면  muted autoplay playsinline loop  옵션값을 이렇게 해보세요. 안드로이드에서는 muted만 있어도 무음으로 자동재생이 되는데 아이폰에서는 playsinline가 있어야 자동재생 될 거예요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

Y
YourVoid
2년 전
따로 루프 할 필요는 없고, 페이지 로드 시 딱 한번만 나오면 되는 인트로 동영상 입니다. 모바일이 아닌 pc환경의 크롬에서부터 작동이 되질 않고있습니다.

댓글을 작성하려면 로그인이 필요합니다.

t
techstar
2년 전

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

Y
YourVoid
2년 전
pc환경에서 동영상 재생을 원하며, 테스트로 pc환경에서 크롬으로 진행 했습니다.

댓글을 작성하려면 로그인이 필요합니다.

비

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

제
제이앤
2년 전

안녕하세요.

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

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

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

댓글을 작성하려면 로그인이 필요합니다.

설

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

Y
YourVoid
2년 전
[code]
<div class="video-container">
<video muted autoplay>
<source src="../video/WinbowsBulb.MP4" type="video/mp4">
</video>
</div>
[/code]
video 태그를 사용하는 것은 딱 이 부분 뿐 입니다. body태그 안에 들어가있으며, 따로 특별한 css나 js 같은 것도 없습니다. 상대경로이고, 경로도 몇번을 확인했으나 틀리지 않습니다.
Y
YourVoid
2년 전
[code]
.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는 이게 전부 입니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인