Membuat pengalaman video yang kaya dengan popcorn.js-tutorial js-php.cn

Membuat pengalaman video yang kaya dengan popcorn.js

Christopher Nolan

Lepaskan： 2025-02-21 11:28:10

asal

915 orang telah melayarinya

Creating Rich Video Experiences with Popcorn.js

Penyembuhan video laman web adalah perkara biasa, namun sering tidak mempunyai interaktiviti. Popcorn.js mengangkat video tertanam untuk pengalaman yang penuh dengan penuh, menyegerakkan main balik video dengan unsur -unsur laman web yang dinamik. Tutorial ini menunjukkan bagaimana.

faedah utama popcorn.js:

Pengalaman video interaktif: Buat video menarik yang bertindak balas terhadap kandungan video itu sendiri. Integrasi Plugin:
keserasian silang perpustakaan:
Pelaksanaan yang mudah:

Struktur html: Buat dengan

untuk menempatkan video:

index.html <div> Sertakan popcorn.js: Tambahkan perpustakaan popcorn.js ke html anda : <div class="code" style="position:relative; padding:0px; margin:0px;"><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">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <ol start="2"> <li> <strong> </strong> <code><head> integrasi javascript ():

untuk memulakan popcorn.js dan bermain video YouTube:

<🎜>
<🎜>

Salin selepas log masuk

ingat untuk melayani halaman ini melalui pelayan HTTP (mis., app.js pada macOS) untuk fungsi pemain YouTube. app.js

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

Salin selepas log masuk

mari kita meningkatkan aplikasi untuk mengemas kini kandungan secara dinamik berdasarkan cap waktu video. Kami akan memaparkan nama negara seperti yang disebutkan dalam video dunia Yakko. python -m SimpleHTTPServer 2723

Tambahkan elemen teks: tambah elemen

untuk memaparkan nama negara dalam

Manipulasi DOM dengan Plugin: <h2> Gunakan plugin index.html dalam

pada cap waktu tertentu:

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

Salin selepas log masuk

code() Integrasi imej dengan code() plugin: app.js Tambah <h2> ke

untuk menggunakan plugin

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

Salin selepas log masuk

flickr() <div id="photos"></div> Mengintegrasikan Peta Google: index.html Sertakan Google Maps API dalam 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) ...

Salin selepas log masuk

Tambah

to index.html . Dalam app.js <code>index.html, memulakan peta dan gunakan geocoder untuk meletakkan penanda berdasarkan nama negara: app.js

<!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>
Salin selepas log masuk
Salin selepas log masuk
Contoh yang diperluaskan ini mempamerkan kepelbagaian popcorn.js dalam mewujudkan pengalaman video yang dinamik dan interaktif. Ingatlah untuk berunding dengan dokumentasi popcorn.js rasmi untuk butiran lanjut dan pilihan plugin.