Facebook 인스턴트 문서에 Brightcove 플레이어 게시

이 항목에서는 Facebook Instant Article 페이지에 Brightcove 플레이어를 게시하는 방법에 대해 알아 봅니다.

Facebook Instant Articles는 Facebook 뉴스 피드에서 기사를 읽을 수있는 빠르고 상호 작용적인 경험입니다. 인스턴트 기사는 컨텐츠 관리 시스템 (Instant Articles API 사용)에서 직접 게시하거나 RSS 피드를 제공하여 게시 할 수 있습니다. 인스턴트 아티클은 표준 모바일 웹 아티클보다 10 배 더 빠르게 표시됩니다. 팔로우하는 친구 나 페이지가 뉴스 피드에서 링크를 공유하면 Facebook은 해당 URL과 관련된 인스턴트 기사가 있는지 확인합니다. 그렇다면 Facebook은 인스턴트 아티클로 표시합니다. 그렇지 않은 경우 웹 브라우저에서 열립니다.

Instant Article에 포함 된 Brightcove 플레이어는 계속해서 다음을 지원합니다.

  • 프리 롤 및 미드 롤 광고
  • Brightcove 분석
  • 타사 플러그인

분석은 Brightcove에서 수집되지만 분석에 기록된 디스플레이 도메인은brightcove.com도메인이 아닌facebook.com도메인.

인스턴트 아티클을 사용하여 다양한 유형의 콘텐츠를 공유 할 수 있지만이 항목에서는 인스턴트 아티클 페이지에서 Brightcove 플레이어 공유에 대해 설명합니다. 인스턴트 기사에 대한 자세한 내용은 다음을 참조하십시오. Facebook 문서 .

플레이어 소스 코드 생성

인스턴트 아티클에서 사용하기 위해 플레이어 속성을 변경할 필요가 없습니다. 인스턴트 아티클에 대한 플레이어 소스 코드를 생성하려면 다음 단계를 따르십시오.

  1. Video Cloud Studio에서 표준 iframe 소스 코드를 가져 와서 HTML5 안에 배치합니다. <figure>요소.
    	<그림>
    	<iframe src="//players.brightcove.net/1486906377/V1ziujO35l_default/index.html?videoId=3766858011001"
    	 허용 전체 화면 웹키트허용전체 화면 모질로전체 화면 > < 너비="640"높이="360"/iframe >
    	</figure>
    	        
  2. 추가op-interactive클래스figure꼬리표.
    	<그림 class = "op-interactive" >
    	<iframe src="//players.brightcove.net/1486906377/V1ziujO35l_default/index.html?videoId=3766858011001"
    	 허용 전체 화면 웹키트허용전체 화면 모질로전체 화면 > < 너비="640"높이="360"/iframe >
    	</figure>
    	        
  3. iframe에widthheight . 그만큼widthheight플레이어의 절대 크기보다는 종횡비를 설정하십시오. 완성 된 코드는 다음과 같습니다.
    	<figure class = "op-interactive">
    	<iframe src="//players.brightcove.net/1486906377/V1ziujO35l_default/index.html?videoId=3766858011001"
    	 allowfullscreen webkitallowfullscreen mozallowfullscreen 너비 = "16"높이 = "9" > </ iframe>
    	</figure>