더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
총 8개의 일치하는 문서를 찾았습니다.
- webdevetc
[HTML5] Video 태그 사용 방법 및 예제 정리
아래는 HTML5의 Video 태그의 사용 방법과 예제 등 다양한 내용을 정리하였습니다.# Video 태그는?미디어 파일인 비디오나 오디오 등을 재생하기 위해서 HTML5부터 새롭게 추가된 API가 바로 Video 그리고 Audio입니다. 이 둘은 실제로 거의 비슷한 메소드와, 프로퍼티를 가지고 있습니다. 여기서는 Video 태그에 대하여 알아봅니다.! Video 태그의 특징은?video 태그는 다양한 포맷을 지원하며 비디오 영상을 쉽고 간단하게 재생할 수 있습니다. video 태그를 사용해 다양한 브라우저 및 환경에서 재생 가능합니다. Video 태그를 사...
Last Modified : 2020-11-26 15:09:02
Created : 2020-02-12 23:40:56 - html
HTML5 Video 태그 모바일에서 자동재생 안되는 경우, 안드로이드
HTML5의 Video 태그를 사용하여 미디어 파일을 재생시 autoplay 속성을 사용하여 자동 재생하는 것이 가능합니다. 하지만 모바일의 경우 자동재생이 되지 않을 수 있습니다. 왜 모바일에서만 자동재생 기능이 되지 않을까요?# 모바일에서 Video 자동영상 안되는 이유이유는 모바일 브라우저에서 허용되기 않기 때문입니다. 만약 모바일 환경의 안드로이드폰이라면 자동 재생시 음소거를 설정해두세요. 음소거 영상의 경우에만 자동재생이 허용됩니다. 즉 video 태그에 muted와 autoplay 속성이 동시에 필요합니다.# HTML5 모바일폰 자동재생하기아래 에제는 간단...
Last Modified : 2018-01-29 07:15:08
Created : 2017-08-03 20:09:37 - etc
비디오 재생하기 위한 방법으로 hls.js 사용하기
HTML5에서는 VIDEO / AUDIO의 기능이 매우 폭넓게 확장되었습니다. 그런데 크롬 및 기타 브라우저에서 m3u8 확장자를 가진 영상을 재생할 경우 플레이되지 않을 수 있습니다. 이는 해당 디바이스 및 OS에서 지원하지 않기 때문입니다. 이 경우 해결하기 위한 방법으로 hls.js를 사용하는 방법이 있습니다.hls.js를 사용하는 방법에 대하여 알아볼까 합니다. 대부분의 써드파티 앱처럼 이 역시 인스턴스를 생성하고 메소드를 호출하는 방식을 사용합니다.# HLS.js 시작하는 방법아래 방법은 hlsVideo라는 이름으로 인스턴스를 생성하고 몇 가지 이벤트 및 제...
Last Modified : 2017-04-25 19:41:55
Created : 2017-04-25 19:32:13 - etc
HLS 중지, destroy 시키는 방법
만약 생성한 인스턴스의 이름이 hlsVideo인 경우 페이지를 이탈하거나 더 이상 이벤트가 필요하지 않은 경우 아래와 같은 방법으로 Destroy, 중지합니다.# hls.js를 사용한 인스턴스 destroy 방법아래와 같이 destroy() 함수를 사용합니다. 만약 인스턴스 네임이 hlsVideo인 경우...hlsVideo.destroy();위의 방법으로 정상적으로 destroy()됩니다....
Last Modified : 2017-04-26 13:11:25
Created : 2017-04-25 19:12:21 - etc
HTML Audio/Video 엘리먼트의 DOM메소드 load() 역할은?
HTML Audio/Video 엘리먼트의 DOM메소드 load()가 하는 역할입니다.해당 DOM 요소의 load() 메소드는 비디오 태그가 가지고 있는 소스 및 설정을 적용하는 것이 아니라 업데이트를 하기 위한 태그입니다.즉 소스가 태그에 추가된 경우 load()를 사용하여 소스 및 설정 재적용할 필요는 없습니다. ...
Last Modified : 2017-04-25 15:06:00
Created : 2017-04-25 15:06:00 - etc
HTML5의 Video태그에서 m3u8 포맷이 재생되지 않는 경우
HTML5의 Video태그에서 m3u8 포맷이 재생되지 않는 경우가 크롬에서 발생될 수 있습니다. 이 경우 해결방법은 무엇일까요?원인은 크롬 및 기타 디바이스 환경에서 HLS를 완전히 지원하지 않기 때문에 발생합니다. 이 경우 브라우저를 다른 것으로(Ex. Edge) 바꾸거나 HLS를 지원하는 iOS, Safari 등으로 바꾸면 해결될 수 있습니다. 만약 반드시 해당 환경에서 지원이 필요하다면 Flash를 서포트하는 별도의 어플리케이션을 설치하거나 Javascript를 사용하여 HLS를 지원하게 해주는 서드파티 js를 설치해주는 방법으로도 해결이 가능합니다.hdsJS...
Last Modified : 2017-04-21 14:12:40
Created : 2017-04-21 14:04:16 
etcYoutube 방문자 늘리는 팁과 노하우
동영상 시장의 성장은 모두의 예상처럼 가히 폭발적이다. 특히 구글에서 서비스하는 Youtube의 경우 구글 검색 다음으로 많은 검색 플랫폼으로 특히 유투브 동영상(youtube.com) 검색은 어린 세대로 이동할 수록 이용율이 매우 높아진다. 그렇기 때문에 향후 이 세대들이 성장하면서 자연스럽게 유투브 시장 역시 그 영역을 더욱 확장할 것을 예상할 수 있다.Youtube 크리에이터, 또 다른 기회시장은 기회를 만들고 수 많은 콘텐츠 제작자를 탄생시킨다. 1인 콘텐츠 크리에이터라고 불리던 유투브 동영상 제작자는 팀이 되고 점점 단체 또는 사로 규모가...
Last Modified : 2016-08-16 19:46:13
Created : 2016-08-16 19:46:13- webdevetc
ie 8 embed 태그 youtube 동영상 재생이 안되는 경우
embed 태그를 사용하여 유투브(Youtube) 영상을 콘텐츠에 삽입하는 경우 IE 8 에서 정상적으로 동작하지 않을 수 있다. 이 경우 어떻게 해야 정상적으로 IE 8 구버전에서 플레이가 가능한지 알아보고자 한다.먼저 embed 태그가 IE 8 에서 지원하지 않는 것 같다... 이를 해결하기 위해 아래와 같이 해당 태그를 다른 태그로 변경하면서 테스트를 실시하였다. 실시 환경은 Windows 7 IE 8 브라우저이다.1. object 태그2. video 태그3. iframe 태그위와 같이 세 가지 태그를 모두 사용하여 IE 8 에서 테스트한 결과는 다음과...
Last Modified : 2016-04-04 20:18:17
Created : 2016-04-04 19:37:18