728x90 반응형 전체 글41 [javaScript] ios기기에서 절전모드(저절력모드) 일 때, video 자동재생되지 않는 이슈 ios 기기에서 저전력(절전) 모드 일 때, video autoplay(자동재생)되지 않는 현상 해결 방법 3가지! [이슈 설명] 태그를 활용해 영상을 자동재생으로 추가했을 때, 유독 아이폰에서만 자동재생이 되지 않는 현상을 발견했다. 그 이유는 아이폰에서 절전모드인 저전력 모드를 사용하고 있는 경우에만 나타나는 현상이다! [해결방법 1] 사용자가 영상을 클릭 또는 영상 컨트롤할 수 있는 버튼을 통해 play/pause 제어를 할 수 있도록 변경하는 방법이다. (단점, 기획자를 비롯해 함께 프로젝트를 진행하는 TF 인원들에게 기능 수정을 요청해야 한다..) [해결방법 2] 영상이 재생되지 않을 때의 조건으로 스크립트 제어로 강제로 재생 코드를 추가하는 방법이다. $('body').on('click tou.. 2022. 3. 24. [HTML] ios기기에서 video 자동재생 설정 시, 전체화면모드로 변경되는 이슈 ios기기에서 video autoplay로 자동재생 설정 시, 전체 화면 모드로 변경되는 이슈 ios기기에서 autoplay로 자동재생 설정 했을 때, ios기기에서 정책으로 전체화면 모드로 변경되어 영상이 팝업 형태의 full화면으로 노출되게 된다. [이슈 화면 - full화면으로 노출] See the Pen Untitled by yeony (@yeony1011) on CodePen. [해결방법] - HTML5의 경우 : video태그에 playsinline 속성 추가 - HTML4 or XHTML의 경우 : webkit-playsinline 속성 추가 See the Pen : ios 기기에서 전체화면 막기 by yeony (@yeony1011) on CodePen. [참고자료] - TEMP 영상 : .. 2022. 3. 23. [HTML] 영상을 마크업에 추가하는 방법-2(iframe) 태그 이용 iframe을 이용하면 현재 웹 페이지 안에 또 다른 웹 페이지 삽입이 가능하므로 외부 링크로 전달받은 경우. iframe : inline frame의 약자. 대표적인 링크 : 유튜브 링크, 카카오TV 링크, 네이버TV 링크 등등. 지원 브라우저 Browser iframe IE O Edge O Chrome O Firefox O Safari O Opera O 예시 코드 [참고자료] - : https://caniuse.com/?search=iframe "iframe" | Can I use... Support tables for HTML5, CSS3, etc seamless attribute for iframes The seamless attribute makes an iframe's content.. 2022. 3. 23. [HTML] 영상을 마크업에 추가하는 방법-1(video) 태그 이용 HTML5 기준으로 사용 방법 명시. 별도 파일로 영상을 전달받은 경우. 대표적인 확장자 - HTML5 표준이 공식적으로 지원하는 비디오 파일 형식 : MP4, WebM, OGV 파일형식 (파일 확장자) 설명 MPEG (.mpg .mpeg) - Moving Picture Experts Group에 의해 개발. - 변환 코덱을 이용하는 손실 압축 방식을 사용. OGV (.ogg) - Xiph 재단에 의해 개발. - MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식. QuickTime (.mov) - Apple에 의해 개발. - 매킨토시 컴퓨터에 동영상을 지원하기 위해 개발된 파일 형식. WebM (.webm) - 구글의 지원으로 개발된 개방형 공개 멀티미디어 파.. 2022. 3. 22. [CSS] font 두께(font-weight) 선언 시 유의점 CSS로 폰트 선언 시 유의점 일반적인 font-weight 스타일은 normal, bold처럼 굵기를 영문 텍스트로 표기한다. 하지만, normal과 bold 이외의 굵기를 표현하는 폰트에서는 숫자로 가중치를 표기하는 방식이 폰트 정의에 좋은 방법이다. ex) NotoSans-Medium 등등 [일반적인 가중치의 이름 매핑] 가중치 이름 매핑 100 Thin (Hairline) 200 Extra Light (Ultra Light) 300 Light 400 Normal 500 Medium 600 Semi Bold (Demi Bold) 700 Bold 800 Extra Bold (Ultra Bold) 900 Black (Heavy) [참고자료] - MDN : https://developer.mozilla... 2022. 3. 20. 이전 1 2 3 4 다음 728x90 반응형
