Popcorn.js로 풍부한 비디오 경험을 만드는 것

웹 사이트 비디오 임베딩은 일반적이지만 종종 상호 작용이 부족합니다. Popcorn.js는 임베디드 비디오를 완전히 몰입 형 경험으로 높이고 동적 웹 페이지 요소와 비디오 재생을 동기화합니다. 이 튜토리얼은 방법을 보여줍니다.

Popcorn.js의 주요 혜택 :

대화식 비디오 경험 : 비디오 컨텐츠 ​​자체에 응답하는 매력적인 비디오 생성. 플러그인 통합 : Wikipedia, Facebook, Tumblr, Flickr 등의 플러그인 활용 비디오 컨텍스트. 크로스-라이브러리 호환성 :

팝콘 .js를 다른 라이브러리 (예 : Google지도)와 동적 인터페이스에 결합합니다. 쉬운 구현 :

라이브러리 다운로드, HTML에 포함시키고 비디오 제어 및 컨텐츠 통합을 위해 API를 활용하십시오.
• 기본 팝콘 구축 HTML 구조 :
를 만들어 비디오를 수용하기 위해 만들기 : include popcorn.js :
• popcorn.js 라이브러리를 html에 추가하십시오 : .
• javaScript 통합 () : CREATE 팝콘 .js를 초기화하고 YouTube 비디오를 재생합니다 :

YouTube 플레이어 기능을 위해 HTTP 서버 (예 : MacOS에서 )를 통해이 페이지를 제공하는 것을 잊지 마십시오. 고급 기술 : 동적 컨텐츠 동기화 :

비디오 타임 스탬프를 기반으로 컨텐츠를 동적으로 업데이트하기 위해 응용 프로그램을 향상시킵니다. Yakko의 세계 비디오에 언급 된 국가 이름을 표시 할 것입니다. 텍스트 추가 요소 추가 :

에 국가 이름을 표시하기 위해 요소를 추가하십시오. index.html <div> 플러그인을 사용한 DOM 조작 : 플러그인을 사용하여 특정 타임 스탬프에서 컨텐츠를 업데이트하려면 : <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-html&quot;&gt;&lt;!DOCTYPE html&gt; &lt;title&gt;Hello World Popcorn.js&lt;/title&gt; &lt;link href=&quot;http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;style&gt; .video, #map { width: 300px; height: 200px; float: left; } &lt;/style&gt; &lt;div class=&quot;video&quot;&gt;&lt;/div&gt; &lt;/code&gt;</pre> <ol start="2"> <li> <strong> </strong> 플러그인을 사용한 이미지 통합 : <code> 이미지의 에 추가하십시오. 플러그인을 사용하려면 를 수정하십시오

<code class="language-html">
</code>

Google지도 통합 :
3. Google지도 API 포함 : app.js app.js a
를 추가하십시오> ~ index.html . app.js <code>index.html에서 맵을 초기화하고 지오 코더를 사용하여 국가 이름에 따라 마커를 배치합니다. app.js 이 확장 된 예제는 역동적이고 대화 형 비디오 경험을 만드는 데있어서 Popcorn.js의 다양성을 보여줍니다. 자세한 내용과 플러그인 옵션은 공식 Popcorn.js 문서에 문의하십시오.