網站視頻嵌入很常見，但通常缺乏互動性。 popcorn.js將嵌入式視頻提升為完全沉浸式體驗，將視頻播放與動態網頁元素同步。本教程演示瞭如何。
> popcorn.js的關鍵好處：
html結構：
創建
index.html
<div>
包括popcorn.js：<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">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>添加popcorn.js庫到您的html <ol start="2">：<li>>
<strong>
</strong>
<code><head>
<🎜> <🎜>
app.js記住要通過YouTube Player功能的HTTP服務器（例如，MacOS上的app.js window.onload = function() {
var pop = Popcorn.youtube(".video", "http://www.youtube.com/watch?v=x88Z5txBc7w");
pop.play();
};
python -m SimpleHTTPServer 2723
添加文本元素：添加元素以顯示
>中的國家名稱：
<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.htmlapp.js集成Google地圖：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 index.html <code>index.html。 在 app.js<code>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>這個擴展的示例在創建動態，交互式視頻體驗時顯示了popcorn.js的多功能性。 請記住，請諮詢官方的popcorn.js文檔以獲取更多詳細信息和插件選項。
>以上是用popcorn.js創建豐富的視頻體驗的詳細內容。更多資訊請關注PHP中文網其他相關文章！
