본문 바로가기

[IT/Programming]/HTML related

v.qq.com 동영상 퍼오기 # v.qq.com 동영상 퍼오기 동영상 주소: https://v.qq.com/x/cover/mzc00200cg24vid/y0048i7crfg.html iframe ```[.lang-html] ```/ 3분까지만 로딩되고 나머지는 페이지 방문해서 봐야 하는듯? 광고도 많고 ㅡ,.ㅡ;;; 유튜브보다 못한거 같은데, 중국이라서 국내기업 키워주느라 유튜브 막아놓고 이런 사이트 밀어주는듯. 더보기
.webp, .webm, .avif, .mp4 를 img tag, video tag 로 로딩 테스트 (Loading test) # .webp, .webm, .avif, .mp4 를 img tag, video tag 로 로딩 테스트 (Loading test) .webp, .webm 이 .gif 파일을 대체하는 중인데.. (둘 다 움짤 | 움직이는 짤림방지 사진 이지만 용량 차이가 어마어마하기 때문. .webp, .webm 이 더 압축을 잘함.) .webp 는 사진 크기를 25%로 더 줄여서 압축했음. .webm 은 사진 크기를 50%로 줄여서 압축했음. .webm 파일을 가져다가 크기변환없이 압축했음. .mp4: 9.01MB ## PH 2024-02-18 : First posting. ## TOC ## tag test .webp .webm .avif .mp4 ## tag test .webp .webm .avif .mp4 ## 결론.. 더보기
HTML 에서 동영상 연속 재생하기 (playlist, shuffle, replay) # HTML 에서 동영상 연속 재생하기 (playlist, shuffle, replay) 작성중인 글. 이것도 천천히 정리할듯;;; 여러 동영상을 한꺼번에 이어서 재생하거나 반복재생하고 싶어서 정리하는 중. 구현은 Recoeve.net (/user/kipid?cat=[Music/Break]--K-pop) 에 해놨으니 참조하시길. ## PH 2024-01-07 : start, end. ## TOC ## HTML tag HTML5 로 오면서 tag 도 생긴거 같긴한데... 이건 직접 서버를 운영하는 사람만 써먹을 수 있는듯? 동영상을 어딘가에 파일로 올려놔야 하니까;;; 파일 형태로 업로드하고 그냥 link 넣으면 될라나? 사용방법은 참조하시길. 그냥 대충 이런식으로 집어넣으면 됨. Media event 들.. 더보기
유튜브 리스트 (Youtube list) 로 퍼오는 법 # 유튜브 리스트 (Youtube list) 로 퍼오는 법 유튜브 영상 한개만 있는게 아니라, 리스트로 있는 영상들도 많은데, 이 때 동영상 하나만 퍼오는게 아니라 list 통째로 퍼오는 법을 알고 싶어서 정리하는 글. ## PH 2024-02-10 : First posting. ## TOC ## 리스트 퍼오기 예제 링크: 그냥 동영상 볼 때의 링크: https://www.youtube.com/watch?v=xHW7KOcqToo&list=PLUbFnGajtZlUl0zYr4crGveP21BbcZG_L&index=1플레이리스트 | Playlist 홈의 링크: https://www.youtube.com/playlist?list=PLU9-uwewPMe05-khW3YcDEaHMk_qA-7lI 는 list=엄청긴_.. 더보기
Getting Data from Google Spreadsheet or Excel # Getting Data from Google Spreadsheet or Excel 작성중. Excel 같은 형태로 data를 관리하면 편할때가 많음. 뭐 프로그래밍에 익숙한 분들이라면 SQL 같은걸 이용할수도 있겠지만, 간단한 데이터의 경우 이런것보다 간단하게 excel이나 google spreadsheet 같은 것을 이용하는 것이 훨씬 간편하고 좋음. 그런데 이 data를 인터넷에서 잘 보여주고 싶을때는 excel이 아닌 html / javascript array / JSON (JavaScript Object Notation) 형태로 편집을 해줘야 할텐데... 엑셀이나 google spreadsheet의 데이터를 html로 편집 가능한 형태로 변환해 봅시다. ## PH 2024-02-09 : To .. 더보기
Pattern Replace 를 이용한 http, https 링크 (그림, 동영상, 유튜브, 인스타그램, 틱톡, Soundcloud, 카카오TV, 네이버TV 등) 처리 | Rendering # Pattern Replace 를 이용한 http, https 링크 (그림, 동영상, 유튜브, 인스타그램, 틱톡, Soundcloud, 카카오TV, 네이버TV 등) 처리 | Rendering Regular Expression 을 사용해서 http, https 링크들을 적절하게 처리해 봅시다. ## PH 2024-02-07 : First posting. ## TOC ## URI rendering ```[.linenums.lang-js] //////////////////////////////////////////////////// // URI rendering :: http link itself, videos, images, maps. ///////////////////////////////////////.. 더보기
Getting html of container including the container itself # Getting html of container including the container itself jQuery 를 이용하거나 그냥 JavaScript 를 이용해서 내부의 html 은 다음과 같이 끄집어낼 수 있다. ```[.lang-js] let containerHTML = $("#container").html(); let containerInnerHTML = $("#container")[0].innerHTML; ```/ ## PH 2024-02-06 : First posting. ## TOC ## 예제 (innerHTML) 아래 html 은 다음과 같다. ```[.lang-html] ```/ 다음과 같은 함수들로 내부 html 을 뽑아와 보자. ```[#pre-code-innerHTML.lang.. 더보기
구글 크롬 브라우저 캐시 지우기 및 강력 새로고침 하는 방법 # 구글 크롬 브라우저 캐시 지우기 및 강력 새로고침 하는 방법 인터넷 브라우저들은 통신에 소비되는 비용을 아끼기 위해 바뀌지 않는 데이터들 (사진이나 동영상, javascript 파일, css 파일, html 파일 등) 을 브라우저 로컬 저장소에 저장/캐시 (cache) 해놓고, 사용자가 같은 사이트를 다시 방문할때 변하지 않았을거라 추측되는 데이터들은 다운받지 않고 캐시 해놓은 데이터를 이용해서 페이지를 띄우는 경우가 많다. 하지만 이 경우 접속하고자 하는 홈페이지의 몇 개의 파일/데이터들이 바뀌었는데도 새로 다운로드 받지 않고 캐시된 데이터를 써서 에러를 일으키는 경우가 있는데, 이를 방지하기 위해 캐시를 지우고, 강력하게 새로고침 하는 방법에 대해 설명해볼까 한다. 참고는 에서... ## PH 2.. 더보기