使用Popcorn.js创建丰富的视频体验

安博文

2023-12-01

考虑到将视频嵌入网站的难易程度，开发人员经常对此感到惊讶，那就是普通的旧嵌入式视频。如果您可以为用户提供由视频本身指导的完整体验，该怎么办？使用Popcorn.js，您可以做到这一点-本文将教您如何操作。

Popcorn.js基础知识

让我们从小处开始。我们将安装Popcorn.js，然后立即建立并运行“ Hello World”示例。

1.创建一个简单的HTML页面

我们将从创建具有以下内容的index.html文件开始。毫不奇怪， .video div最终将出现在我们的视频中。

<!doctype html>
<html>
  <head>
    <title>Hello World Popcorn.js</title>
  </head>
  <body>
    <div class="video"></div>
  </body>
</html>

2.包括我们的自定义样式

接下来，让我们为项目添加一些基本样式。更新后的head前面的HTML页面的部分如下所示。

<head>
  <title>Hello World Popcorn.js</title>
  <style>
    .video, #map
    {
      width:300px;
      height:200px;
      float:left;
    }
  </style>
</head>

3.包含Popcorn.js

接下来，我们需要包含Popcorn.js库本身。在Popcorn.js下载页面上有很多选项可供选择。我们将使用“完整”版本，其中包括所有官方的Popcorn.js插件。在本教程中，我们将使用缩小版本，但是如果您想在源代码中打个比方，则可以使用开发版本。请注意以下代码示例中的其他导入。

<head>
  <title>Hello World Popcorn.js</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  <style>
    ...
  </style>
  <script type="text/javascript" src="http://cdn.popcornjs.org/code/dist/popcorn-complete.min.js"></script>
</head>

4.创建并包含`app.js`

接下来，让我们为应用创建主JavaScript文件。这是我们初始化Popcorn.js实例的地方。创建app.js并将其包含在index.html文件中。 app.js的内容如下所示。

// Wait for the DOM to load
window.onload = function() {
  // Create popcorn instance from the YouTube video and insert it into the .video div
  var pop = Popcorn.youtube(".video", "http//www.youtube.com/watch?v=x88Z5txBc7w");

  // Play the video automatically
  pop.play();
};

并且，此处显示了更新的index.html head部分。

<head>
  <title>Hello World Popcorn.js</title>
  <style>
    ...
  </style>
  <script type="text/javascript" src="http://cdn.popcornjs.org/code/dist/popcorn-complete.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
</head>

在app.js我们使用了Popcorn对象的youtube()方法从YouTube URL创建视频实例。第一个参数是.video div的选择器。 Popcorn.js将在此处插入我们的视频。第二个参数是YouTube URL。在文件末尾，我们调用pop.play() ，它完全按照其说的去播放视频。

5.灯光，摄像头，动作！

为了确保YouTube播放器正常运行，我们需要从http://服务器提供此页面，而不是简单地在浏览器中打开文件（ file:/// ）。在Mac OS X上，这就像在项目目录中运行以下命令一样简单。

python -m SimpleHTTPServer 2723

您现在可以通过http://localhost:2723访问您的站点。 Windows用户可以考虑使用lighttpd或Mongoose 。

设置好HTTP服务器后，在浏览器中启动页面，您应该会看到Yakko唱了一首关于世界各国的歌曲！接下来，我们将在视频播放时使用Popcorn.js来操纵我们的页面。

使用Popcorn.js定向页面

我们将通过在视频的特定位置运行一些自定义JavaScript代码段，使视频“定向” DOM。您可以在此处看到最终的现场演示：

在CodePen上查看Brad（ @Haizyfox ）的Pen FudAq 。

首先，我们将添加一个text元素。然后，对于Yakko提到的每个国家/地区，我们将使用该国家/地区的名称更新text元素。在本教程中，我已经为Yakko唱歌的前七个国家/地区中的每个国家/地区绘制了时间代码。对于您自己的项目，您需要观看视频并确定要用于提示的时间戳。

1.向页面添加`h2`文本元素

在index.html ，将以下标记添加为页面的body 。

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

2.更新DOM

在视频播放过程中的某些时间，我们将使用代码插件来更新DOM。对app.js进行以下更新。在浏览器中测试页面。当视频到达20.2秒且Yakko说“美国”时， h2应说美国。

// When Yakko says United States, update the h2
pop.code({
  start: 20.2,
  end: 20.7,
  onStart: function() {
    document.querySelector(".country-name").innerHTML = "United States";
  }
});

// Play the video automatically
pop.play();

3.显示所有国家/地区的名称

让我们添加更多的国家/地区，并对代码进行一些重构。我们将创建一个国家及其时间戳的列表，然后遍历该列表，为每个国家调用code()方法。

...

// Set the h2 to the specified country name
var setCountry = function(country) {
  document.querySelector(".country-name").innerHTML = country;
};

// Countries List
var countries = [
  { start: 20.2, end: 20.7, country_name: "United States" },
  { start: 20.7, end: 21.2, country_name: "Canada" },
  { start: 21.2, end: 21.7, country_name: "Mexico" },
  { start: 21.7, end: 22.2, country_name: "Panama" },
  { start: 22.2, end: 22.7, country_name: "Haiti" },
  { start: 22.7, end: 23.2, country_name: "Jamaica" },
  { start: 23.2, end: 23.7, country_name: "Peru" }
];

// Loop through the countries
countries.forEach(function(country) {
  // Call setCountry() at the start of each country's start time.
  pop.code({
    start: country.start,
    end: country.end,
    onStart: function() { setCountry(country.country_name); }
  });
});

// Play the video automatically
pop.play();

在浏览器中打开页面，并在Yakko唱歌时观看h2更改。很酷吧？我们已经成功使用Popcorn的代码插件根据视频的时间更新了DOM。

注意：我们在这里使用了ECMAScript forEach（）循环，但是您可以根据需要使用jQuery或UnderscoreJS。

让我们用图像生动活泼

Popcorn有很多插件。有用于Wikipedia，Facebook，Tumblr等的插件。我们可以使用Flickr插件在播放视频时显示我们国家的一些图像。首先，我们需要在页面上添加一个div来保存照片：

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

接下来，我们将使用Flickr插件，该插件需要一些参数：

numberofimages –要从Flickr获取的照片数量。
标签 –搜索短语/标签以匹配图像。
高度和宽度 –照片的高度和宽度。
target –要将照片附加到的div的ID。
开始和结束 –我们应该在其中显示照片的窗口。

对于每个国家，使用flickr()方法对国家的国旗进行图像搜索：

...

// Loop through the countries
countries.forEach(function(country) {
  // Call setCountry() at the start of each country's start time.
  pop.code({
    start: country.start,
    end: country.end,
    onStart: function() { setCountry(country.country_name); }
  });
  
  // Search Flick for "Country Flag" and add it to the #photo div
  pop.flickr({
    start: country.start,
    end: country.end,
    tags: country.country_name + " Flag",
    numberofimages: 5,
    height: "100px",
    width: "100px",
    target: "photos"
  });
});

在浏览器中重新加载页面，并观看Popcorn.js在每个国家/地区提取五张彩色图像的情况。

丰富其他图书馆的经验

到目前为止，我们已经使用一些简单的代码片段和插件来更新页面文本并引入一些相关图像。尽管Popcorn.js插件很棒，但实际上您对视频指示的操作没有任何限制。考虑到这一点，让我们使用Google Maps V3 JavaScript API在真实地图上重新创建Yakko的旋风之旅！

1.包含Google Maps API

在HTML页面中包含Google Maps JavaScript API：

...
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript" src="http://cdn.popcornjs.org/code/dist/popcorn-complete.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
...

2.创建一个`div`以包含我们的地图画布

添加以下示例中显示的div#map元素。

...
<h2>Yakko's singing about <span class="country-name">---</span></h2>
<div class=".video"></div>
<div id="map"></div>
<div id="photos"></div>
...

3.初始化Google Map

在您的app.js文件中，添加以下代码。重新加载页面时，您应该会看到地图在#map div中缩小了很远。

// Popcorn country code from earlier
...

// Center the map on Chicago
var center = new google.maps.LatLng(41.850033, -87.6500523);

// Create a Road Map in the #map div  
var map = new google.maps.Map(document.getElementById("map"), {
  zoom: 1, // Zoom the map out really far
  center: center,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

4.将标记添加到地图

让我们在地图上添加一个标记，以便我们在Yakko唱歌时可以将其移动：

...
// Add a maker to the map, placed at Chicago
var marker = new google.maps.Marker({
  map: map,
  position: center,
  visible: true
});

5.使用Google Geocoder

有趣的来了。我们将使用Google Maps地理编码器通过国家/地区名称查找每个国家/地区的纬度和经度。首先，实例化地址解析器，如下所示。

var geocoder = new google.maps.Geocoder();

接下来，我们将修饰setCountry()方法以使用地理编码器对我们每个国家/地区进行地理编码：

...
// Set the current country
var setCountry = function(country) {
  // Set the h2 to the specified country name
  document.querySelector(".country-name").innerHTML = country;

  // Geocode the country and move the marker
  geocoder.geocode({address : country}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      // Move the marker
      marker.setPosition(results[0].geometry.location);
    }
  });
};

您可以在其文档页面上详细了解Google Maps API和地理编码器。对于每个国家/地区，作为setCountry()函数的一部分，我们setCountry()国家/地区作为地址进行地理编码。我们使用LatLng坐标返回结果，该坐标用于通过marker.setPosition()移动标记。

晋级决赛

我希望本文能够向您展示Popcorn.js必须为您的站点提供丰富的，视频驱动的界面的潜力。有各种各样的创意应用程序正在等待实现。我希望看到你的！

From: https://www.sitepoint.com/creating-rich-video-experiences-popcorn-js/

使用Popcorn.js创建丰富的视频体验

Popcorn.js基础知识

1.创建一个简单的HTML页面

2.包括我们的自定义样式

3.包含Popcorn.js

4.创建并包含`app.js`

5.灯光，摄像头，动作！

使用Popcorn.js定向页面

1.向页面添加`h2`文本元素

2.更新DOM

3.显示所有国家/地区的名称

让我们用图像生动活泼

丰富其他图书馆的经验

1.包含Google Maps API

2.创建一个`div`以包含我们的地图画布

3.初始化Google Map

4.将标记添加到地图

5.使用Google Geocoder

晋级决赛

相关阅读

相关文章

相关问答

相关文档

使用Popcorn.js创建丰富的视频体验

Popcorn.js基础知识

1.创建一个简单的HTML页面

2.包括我们的自定义样式

3.包含Popcorn.js

4.创建并包含app.js

5.灯光，摄像头，动作！

使用Popcorn.js定向页面

1.向页面添加h2文本元素

2.更新DOM

3.显示所有国家/地区的名称

让我们用图像生动活泼

丰富其他图书馆的经验

1.包含Google Maps API

2.创建一个div以包含我们的地图画布

3.初始化Google Map

4.将标记添加到地图

5.使用Google Geocoder

晋级决赛

相关阅读

相关文章

相关问答

相关文档

4.创建并包含`app.js`

1.向页面添加`h2`文本元素

2.创建一个`div`以包含我们的地图画布