popcorn.jsで豊富なビデオエクスペリエンスを作成します-jsチュートリアル-php.cn

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

Christopher Nolan

リリース： 2025-02-21 11:28:10

オリジナル

914 人が閲覧しました

Creating Rich Video Experiences with Popcorn.js

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

popcorn.jsの重要な利点：

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

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

を作成してください：

index.html<div>popcorn.jsを含める：popcorn.jsライブラリをhtml：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html> <head> <title>Hello World Popcorn.js</title> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <style> .video, #map { width: 300px; height: 200px; float: left; } </style> </head> <body> <div class="video"></div> </body> </html></pre><div class="contentsignin">ログイン後にコピー</div></div>に追加します <ol start="2"> <li> <strong> </strong><code><head>JavaScript Integration（）：

<🎜>
<🎜>

ログイン後にコピー

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テキスト要素の追加：

：：に国名を表示する

要素を追加します

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

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

ログイン後にコピー

画像統合code()プラグイン：画像の場合はcode()にapp.jsを追加します。 <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) ...

ログイン後にコピー

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

// ... (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) ...

ログイン後にコピー

index.html<code>index.html

app.js<code>app.js

以上がpopcorn.jsで豊富なビデオエクスペリエンスを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。