popcorn.jsで豊富なビデオエクスペリエンスを作成します

ウェブサイトのビデオ埋め込みは一般的ですが、しばしば対話性が欠けています。 popcorn.jsは、埋め込まれたビデオを完全に没入感のあるエクスペリエンスに高め、動的なWebページ要素とビデオ再生を同期させます。このチュートリアルは、方法を示しています

popcorn.jsの重要な利点：

• インタラクティブなビデオエクスペリエンス：ビデオコンテンツ自体に応答する魅力的なビデオを作成します。
プラグインの統合：
• Wikipedia、Facebook、Tumblr、Flickrなどのプラグインをレバレッジし、ビデオコンテキストを強化します。 クロスライブラリー互換性：
ダイナミックインターフェイスのためにPopCorn.jsを他のライブラリ（Googleマップなど）と組み合わせる。
• 簡単な実装：ライブラリをダウンロードし、HTMLに含めて、ビデオコントロールとコンテンツ統合のためにAPIを利用します。
• 基本的なpopcorn.jsアプリケーションの構築：

html構造：ビデオを収容するために

を作成してください：

1. index.html<div>popcorn.jsを含める：popcorn.jsライブラリをhtml：<pre class='brush:php;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&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;/head&gt; &lt;body&gt; &lt;div class=&quot;video&quot;&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre>に追加します <ol start="2"> <li> <strong> </strong><code>JavaScript Integration（）：
create

<🎜>
<🎜>

3. YouTubeプレーヤーの機能については、HTTPサーバー（MACOSのなど）を介してこのページを提供することを忘れないでください。 app.js高度な手法：動的コンテンツの同期：app.js
ビデオのタイムスタンプに基づいてコンテンツを動的に更新するためにアプリケーションを強化しましょう。 Yakkoの世界ビデオで言及されている国名を表示します。

window.onload = function() {
  var pop = Popcorn.youtube(".video", "http://www.youtube.com/watch?v=x88Z5txBc7w");
  pop.play();
};

python -m SimpleHTTPServer 2723テキスト要素の追加：

：：に国名を表示する

要素を追加します
1. プラグインを使用したDOMの操作：<h2></h2>プラグインを使用して、特定のタイムスタンプでindex.htmlコンテンツを更新してください：

<h2 id="Yakko-s-singing-about-span-class-country-name-span">Yakko's singing about <span class="country-name"></span></h2>

2. 画像統合code()プラグイン：画像の場合はcode()にapp.jsを追加します。 <h2></h2>プラグインを使用するには、
を変更します：

// ... (previous code) ...

var countries = [
  { start: 20.2, end: 20.7, country_name: "United States" },
  // ... add more countries ...
];

countries.forEach(function(country) {
  pop.code({
    start: country.start,
    end: country.end,
    onStart: function() {
      document.querySelector(".country-name").innerHTML = country.country_name;
    }
  });
});

// ... (rest of the code) ...

3. flickr()グーグルマップの統合：<div id="photos"></div>：index.htmlにGoogleマップAPIを含める app.js flickr()
a

// ... (previous code) ...

countries.forEach(function(country) {
  // ... (code plugin) ...

  pop.flickr({
    start: country.start,
    end: country.end,
    tags: country.country_name + " Flag",
    numberofimages: 5,
    height: "100px",
    width: "100px",
    target: "photos"
  });
});

// ... (rest of the code) ...

を追加しますto index.html<code>index.html。 app.js<code>app.jsでは、マップを初期化し、ジオコーダーを使用して国名に基づいてマーカーを配置します。 この拡張された例は、ダイナミックでインタラクティブなビデオエクスペリエンスを作成する際のpopcorn.jsの汎用性を紹介します。 詳細とプラグインのオプションについては、公式のpopcorn.jsドキュメントを参照してください。