티스토리 뷰

스터디/HTML, CSS

video 출력이 왜 안되는가

밀크티냠냠 2022. 2. 25. 17:51

모바일로 봤을때 특정기기에서 안된다는 문의가들어왔다..

이러면 안되는데 ㅠ 우선 혹시..혹시나 아이폰이냐고 물어보았다.

그리고 코드 확인을했는데 수정하다가 playsinline 속성이 빠져서 아이폰 기기에서 안됐었던건 해결이 쉽게 됐지만 몇몇 폰에선 또 안된다고 하여 이것저것 알아보면서 다양한 이유로 안될수도 있다는걸 알게되었다.

 

video 코드 쓸일이 없어서 여태껏 가볍게만 알았는데

이유는 이러했다.

video 출력이 왜안되는가 아래 이유일수있다.
0. 인터넷속도가 느리면 비디오 버퍼링이 중지될 수 있다.
1. source로 확장자를 알려줬는가. 확장자지원을 하지 않을 수 있다.
2. autoplay를 사용하는데 mute 속성을 넣어줬는가. 소리가 나면 자동재생이 되지 않는다.
3. playsinline 속성이 있는가. 없으면 iphone에서 실행되지 않을수있다.
4. mp4 파일이 h264코덱이 맞는가 ACC로 출력된것인가.. mp4라고 다 같은 mp4가아니닷. 지원하지않는 mp4일 수 있다.
5. 비디오에 오디오파일자체가 없는가. 무음이라고 음소거로 인지하는게아니라 없어야 재생된다고한다.

 

 

고마운 블로그 글들..ㅠㅠㅠㅠ

 

크롬에서 Video Autoplay가 안되는 이유 | Video Tag Autoplay is not working in Chrome!

이번에 프로젝트를 위한 간단한 시연준비를 하면서 고생한 부분을 기록, 공유한다. 이번에 시연할 때 AWS를 통해 전달 받은 MediaSource를 웹 페이지에서 보여주어야 했다. 음.. 다른 mp4 파일 과는 다

ddunnimlabs.tistory.com

 

<video>태그 브라우저, 모바일 이슈 정리 사항

태그 브라우저, 모바일 이슈 정리 사항 몇 주 전쯤에 으로 작업하던 것들을 웹 앱 이슈상 태그로 변경하는 작업을 하였다. 이 작업의 이유는 회사 정책의 문제였다. +) 비디오 태그로 변경을 하면

okayoon.tistory.com

 

03. 모바일 <video>태그 자동 재생 관련 이슈

이번 프로젝트에서 가장 골치아팠던 부분은 바로 일부 페이지에서 사용되는 동영상을 자동재생하는 기능이었다. 쉽게 될 줄 알았는데 아무래도 브라우저에서 사용자가 원하지 않는 동영상이

blog.leehov.in

 

 

<video>: 비디오 삽입 요소 - HTML: Hypertext Markup Language | MDN

HTML <video> 요소는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다.

developer.mozilla.org

 

 

HTML / video / 동영상 삽입하는 태그

video video는 HTML 문서에 동영상을 삽입하는 태그이다. HTML 5에서 추가된 것이므로, HTML 5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않는다. 문법 <video autoplay controls loop muted

www.codingfactory.net

 

저작자표시 비영리 변경금지

'스터디 > HTML, CSS' 카테고리의 다른 글

CSS animation 마지막 상태 유지하기  (0) 2022.04.15
WEB과 WAS 차이 살짝보기..  (0) 2022.03.03
js, CSS, 이미지 수정시 웹사이트 캐시 방지 방법!  (0) 2021.06.14
웹사이트 속도를 빠르게 하자! 폰트 경량화, 서브셋폰트, woff2, woff, ttf/otf  (0) 2021.06.03
삼각형 길이/각도 구하는 사이트  (0) 2021.03.30
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함