Html 영상 자동재생 - html yeongsang jadongjaesaeng

Question

유튜브 영상을 워드프레스, 블로그, 웹페이지에 게시할때 자동 재생되도록 하기 위해서 는 영상 임베드 코드를 삽입할 수 있다. 모바일 기기에서는 자동 재생이 안 되도록 제한되지만, 아래에서 소개하는 자바스크립트를 사용해 모바일 기기에서 재생이 가능하도록 할 수 있다.

목차 Show

HTML 동영상 재생
유튜브 영상 자동 재생되도록 하기
시도해보기
서버 지원
DOM 인터페이스
브라우저 호환성

또한 테마와 엘리먼터 페이지 빌더에서는 유튜브/비메오 동영상을 자동 재생되는 동영상 배경으로 설정하는 기능도 제공한다.

HTML 동영상 재생

MP4 파일을 서버에 업로드해 재생되도록하는 경우 아래의 코드를 사용할 수 있다.

<video controls autoplay>
 <source src="movie.mp4" type="video/mp4">
 <source src="movie.ogg" type="video/ogg">
</video>

커뮤니티에 움직이는 GIF 파일이 많이 사용되지만 오래된 규격이고 비효율적으로 mp4로 대체되고 있다.

유튜브 영상 자동 재생되도록 하기

동영상 파일은 서버에 직접 업로드하는 대신 유튜브 채널에 업드로해 공유하는 방법은 클라우드에 파일을 올려 여러 장소에서 가져오는 것과 같다. 이를 통해 웹페이지에 게시하는 방법이다.

임베드 코드 내의 동영상 url 뒤에 ?autoplay=1 을 추가하면된다.

유뷰트에서 공유하려는 영상의 공유 버튼을 클릭해 임베드 코드(링크 주소)를 복사한다.

<iframe width="560" height="315" 
 src="https://youtu.be/LcaE-Z8uP6M" 
 title="YouTube video player" 
 frameborder="0" 
 allow="accelerometer; 
 autoplay; clipboard-write; 
 encrypted-media; 
 gyroscope; 
 picture-in-picture" 
 allowfullscreen>
</iframe>

코드에 유뷰트 영상 URL 뒤에 ?autoplay=1을 추가한다. 크롬에서는 사용자 인터랙션 없이 오디오 콘텐츠를 자동 재생되지 않도록 막고 있다. 그래서 &mute=1 파라미터를 추가해 크롬에서도 자동 재생이 작동하도록 할 수 있다.

<iframe width="560" height="315" 
 src="https://youtu.be/LcaE-Z8uP6M?autoplay=1&mute=1" 
 title="blog promotion" 
 frameborder="0" 
 allow="accelerometer; 
 autoplay; clipboard-write; 
 encrypted-media; 
 gyroscope; 
 picture-in-picture" 
 allowfullscreen>
</iframe>

그리고 자동 반복 재생되도록 하기 위해 &loop=1 을 추가한다.

반응형으로 작동하도록 하기 위해서는 CSS코드 추가가 필요하다. 스타일 시트파일에 추가하면된다. (style.css)

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.entry-content img,
.entry-content iframe,
.entry-content object,
.entry-content embed {
max-width: 100%;
}

이렇게 추가해주면 개별 글에서 YouTube 동영상을 삽입할 때 <div class="video-container">....</div> 코드를 유튜브 영상 소스코드를 둘러 싸면 된다.

<div class="video-container"> 동영상 코드 </div>

이렇게 하여 영상을 넣으면 자동 재생이되게 된다.

하지만 모바일에서는 자동 재생이 되지 않을 수 있다. 이는 모바일 기기에서 데이터를 소진하지 못하도록 제한하고 있기 때문인데 자동 재생되도록 하고 싶은 경우 아래 방법으로 가능하다. 자바스크립트 코드를 사용해 가능하다.

<div id="player"></div><script>
                    var tag = document.createElement('script');
                    tag.src = "https://www.youtube.com/iframe_api";
                    var firstScriptTag = document.getElementsByTagName('script')[0];
                    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
                    var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      videoId: 'VideoID',
      playerVars: {   
            'autoplay': 1,   
            'rel': 0,
            'showinfo': 0,
            'modestbranding': 1,
            'playsinline': 1,
            'rel': 0,
            'controls': 0,
            'color':'white',
            'loop': 1,
            'mute':1,
            // 'origin': 'https://meeranblog24x7.blogspot.com/'
      },
      events: {
        'onReady': onPlayerReady,
        // 'onStateChange': onPlayerStateChange
      }
    });
  }
  function onPlayerReady(event) {
    player.playVideo();
    player.mute();
  }var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>

위 코드에서 VidoID 부분을 유뷰브 영상의 vidoid로 바꾼다. 예를 들어 LcaE-Z8uP6M 와 같다.

그리고 컨트롤을 추가해기 위해 controls : 0을 1로 바꾼다.

하지만 모바일에서 동영상 자동재생에 대해 아직 테스트해보지는 않았지만 한가지 우려 되는점은 SEO 에 어떤 영향을 줄 것인지 테스트를 해보아야 한다. 위와같은 자바코드를 통해 자동재생을 할 수 있지만 페이지 로딩 속도에 영향을 줄 수 있다.

영상 홍보 기법

HTML <video> 요소는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다. 오디오 콘텐츠에도 사용할 수 있으나, <audio> 요소가 사용자 경험에 좀 더 적합합니다.

시도해보기

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

위 예제는 <video> 요소의 간단한 사용법을 보입니다. <video> 또한 <img> 요소와 비슷하게, 표시하고자 하는 미디어로의 경로를 src 특성에 제공합니다. 또한 비디오의 너비와 높이, 자동재생과 반복 여부, 브라우저 기본 컨트롤 노출 여부 등 다른 정보도 특성을 통해 지정할 수 있습니다.

<video></video> 태그 안의 콘텐츠는 브라우저가 <video> 요소를 지원하지 않을 때 보여집니다.

특성

이 요소는 전역 특성을 포함합니다.

autoplay

부울 속성(boolean); 해당 속성이 지정된 경우 비디오가 데이터 로드를 완료하기 위해 중지하지 않고 재생할 수 있는 가장 빠른 시점에 재생되기 시작합니다. autoplay를 비활성화시킬 때 autoplay="false"는 동작하지 않습니다. <video>태그 내부에 autoplay 속성이 존재한다면 비디오가 자동재생 됩니다. autoplay를 비활성화하려면 해당 속성을 완전히 제거해야 합니다.

buffered

미디어의 어느 시간대가 버퍼에 들어 있는지 확인할 수 있는 속성입니다. 이 속성은 TimeRanges (en-US) 객체를 포함합니다.

controls

이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다.

crossorigin

crossorigin 속성은 CORS를 사용해서 관련 이미지를 패치해야 하는지 여부를 나타냅니다. CORS-enabled resources (en-US) 는 <canvas> 요소에서 재사용 될 수 있으며 오염되지 않습니다. 허용되는 값은 다음과 같습니다:

anonymous

CORS(Origin: HTTP 헤더 사용)를 수행 합니다. 하지만 credential가 전송되지 않습니다. (즉, cookie, X.509 certificate, HTTP 기본 인증이 전송되지 않습니다). 서버가 원본 사이트에 credentials를 제공하지 않는 경우 (즉, Access-Control-Allow-Origin: HTTP 헤더를 설정하지 않음으로써), 이미지가 오염되고 사용이 제한됩니다.

use-credentials

credential을 포함한 CORS를 (Origin: HTTP 헤더 사용) 수행 합니다. (즉, cookie, certificate, HTTP 기본 인증이 수행됩니다.) 서버가 원본 사이트에 credentials를 제공하지 않는 경우 (즉, Access-Control-Allow-Origin: HTTP 헤더를 설정하지 않음으로써), 이미지가 오염되고 사용이 제한됩니다.

crossorigin이 존재하지 않는 경우, CORS 요청 없이 (즉, Origin: HTTP 헤더를 사용 보내지 않고), 리소스를 가져와 <canvas> 요소에 오염되는 것을 방지합니다. 값을 설정하지 않을 경우 anonymous가 사용 됩니다. 추가 정보는 CORS settings attributes (en-US) 를 참조하십시오.

height

비디오의 출력 영역 높이이며, CSS 픽셀 단위 입니다.

loop

부울(boolean) 속성, 이 값이 설정되면, 동영상 재생이 마친 후(동영상의 마지막에 도달하면) 자동으로 처음으로 돌아갑니다.

muted

비디오에 포함되어 있는 오디오의 기본 설정을 나타내는 부울 속성입니다. 설정하면 오디오가 나오지 않습니다. 기본 값은 false이며 이는 비디오가 재생되면 오디오도 같이 재생됨을 의미합니다.

played

재생된 동영상 영역을 나타내는 TimeRanges (en-US) 객체 입니다.

preload

이 속성은 저작자가 생각하는 가장 좋은 사용자 경험이 어떠한 것인지 브라우저에 미리 정보를 알려주는 용도록 사용됩니다. 다음 값들 중 하나를 가질 수 있습니다:

none: 저작자가 생각하기에 사용자가 비디오를 보지 않거나 서버가 최소한의 트래픽을 유지하고자 함을 의미합니다. 다시 말해서 비디오가 캐시되지 않아야 함을 의미합니다.
metadata: 저작자가 생각하기에 사용자가 비디오를 보지 않을 수도 있지만 메타데이터(예를 들어서 길이)를 미리 가져오는 것은 합리적임을 의미합니다.
auto: 사용자가 우선순위를 가지고 있음을 의미합니다. 다시 말해서 사용자가 이를 사용하지 않을 지라도 필요하다면 전체 비디오가 다운로드 될 수 있음을 의미합니다.
빈 문자열: auto 와 동일합니다.

스펙에서는 기본값으로 metadata를 권장하지만 설정하지 않았다면 각 브라우저가 정한 기본값을 설정하게 됩니다.

참고: 사용 정보:- 비디오를 자동으로 재생하려 한다면 브라우저가 이를 다운로드 해야 하기 때문에 autoplay이 이 속성보다 우선시 됩니다. autoplay 속성과 preload 속성을 둘 다 설정하는 것은 스펙상 가능합니다.

브라우저가 이 속성을 반드시 스팩대로 따라야 하는 것은 아닙니다. 단지 힌트일 뿐입니다.

poster

사용자가 동영상을 재생하거나 탐색하기 전까지 출력되는 포스터 프레임 주소입니다. 이 속성이 명시되지 않으면, 첫 번째 프레임이 사용 가능하게 될때까지 아무것도 출력되지 않다가, 가능하게 되면 첫 번째 프레임을 포스터 프레임으로 출력합니다.

src

삽입(embed)할 동영상의 주소(url)입니다. 이 속성은 선택 사항으로, 비디오 블록 내의 <source> (en-US) 요소를 사용하여 삽입할 동영상을 명시할 수도 있습니다.

width

비디오의 출력 영역 너비이며, CSS 픽셀 단위입니다.

이벤트

<video> 요소는 많은 이벤트 (en-US)를 발생시킬 수 있습니다.

예제

<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  Sorry, your browser doesn't support embedded videos,
  but don't worry, you can <a href="videofile.ogg">download it</a>
  and watch it with your favorite video player!
</video>

<!-- Video with subtitles -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>

첫번째 예제는 동영상을 더 다운받기 위해서 멈추지 않아도 될 정도로 영상이 다운로드 되면 바로 영상이 재생됩니다. 동영상이 재생되기 전까지 "posterimage.jpg" 이미지가 표현됩니다.

두번째 예제에서는 사용자가 서로다른 자막을 선택할 수 있습니다.

서버 지원

동영상 MIME 타입이 올바르게 설정되어 있지 않다면 동영상이 보이지 않거나 X표시가 된 회색 박스가 나오게 됩니다(JavaScript가 활성화 된 경우).

Ogg Theora 동영상을 사용할 경우 아파치 웹 서버에 동영상에서 사용하는 확장자(보통 ".ogm", ".ogv", ".ogg"를 사용합니다)를 "/etc/apache"에 있는 "mime.types" 파일에 "video/ogg" MIME 타입을 추가하거나 httpd.conf에 "AddType" 디렉티브를 이용해서 추가하면 해결됩니다.

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

WebM 동영상을 사용할 경우 아파치 웹 서버에 동영상에서 사용하는 확장자(보통 ".webm"을 사용합니다)를 "/etc/apache"에 있는 "mime.types" 파일에 "video/webm" MIME 타입을 추가하거나 httpd.conf에 "AddType" 디렉티브를 이용해서 추가하면 해결됩니다.

AddType video/webm .webm

여러분의 웹 호스트에서 새로운 기술이 범용적으로 적용되어 업데이트 되기 전까지 편하게 MIME 타입을 설정하는 인터페이스를 제공할지도 모릅니다.

DOM 인터페이스

이 요소는 HTMLVideoElement 인터페이스를 구현하고 있습니다.

브라우저 호환성

BCD tables only load in the browser

참고

html video 반복재생 크롬 동영상 자동재생 모바일 동영상 자동재생 HTML5 video 예제

Html 영상 자동재생 - html yeongsang jadongjaesaeng

HTML 동영상 재생

유튜브 영상 자동 재생되도록 하기

시도해보기

특성

이벤트

예제

서버 지원

DOM 인터페이스

브라우저 호환성

참고

관련 게시물

좋아요 버튼 CSS - joh-ayo beoteun CSS

Html 유튜브 영상 자동재생 - html yutyubeu yeongsang jadongjaesaeng

크롬 동영상 배속 F12 - keulom dong-yeongsang baesog F12

우 커머스 결제 - u keomeoseu gyeolje

GitHub 웹 페이지 배포 - GitHub web peiji baepo

버튼 디자인 사이트 - beoteun dijain saiteu

광고하는

최근 소식

혼다어코드 보험료 - honda-eokodeu boheomlyo

인퀴 지션 도안 모드 - inkwi jisyeon doan modeu

잘 살아라 그게 최고의 복수다 ebook - jal sal-ala geuge choegoui bogsuda ebook

포토샵 레이어 클릭 안됨 - potosyab leieo keullig andoem

갤럭시 탭 S6 공장 초기화 - gaelleogsi taeb S6 gongjang chogihwa

불성 애드온 모음 - bulseong aedeuon mo-eum

자이스토리 1-2 답지 해설 - jaiseutoli 1-2 dabji haeseol

디즈니 플러스 정지 - dijeuni peulleoseu jeongji

로아 레일리 커마 - loa leilli keoma

국내 이륜차 시장 규모 - gugnae ilyuncha sijang gyumo

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의