JS动画. 如何管理视频样本

Hello! 本教程展示了如何在JS动画模板中管理视频样本.

你可能需要替换两个视频 thumbnail 还有一个视频本身在你的模板中:

让我们来学习如何做到这一点.

首先，让我们改变视频样本 thumbnail 用你自己的形象:

1. 上传你的图片到 /img/ directory，比如说，图像被命名了 my_own_image.jpg.

2. Locate the .html 包含视频样本的文件，在我们的例子中是 index.html file.

3. 打开文件进行编辑，找到视频示例代码，它看起来类似于下面的代码:

   Video Samples
   
   
   
   
   
   
   
   
   01/ animals
   
   
   04/ presentations
   
   
   
   
   02/ sport
   
   
   05/ flowers
   
   
   
   
   03/ Advertising
   
   
   06/ fashion
   
   
   
   
   02/ sport
   
   
   05/ flowers
   
   
   
   
   
   
   
   
   
   
   
   

4. 让我们改变第一个视频 thumbnail 通过编辑以下代码:

只需改变 img / page1_pic2.jpg code to img / my_own_image.jpg one:

保存文件并刷新页面以查看 thumbnail 替换成功:

现在，当视频 thumbnail 被替换，让我们改变视频本身:

1. 视频示例代码如下所示:

   

2. 打开视频 youtube.com, click Share ->Embed 视频下方的按钮:

   

中突出显示的代码是我们需要替换的代码 截图 above.

只需替换 “http://www.youtube.com/embed/2kodXWejuy0?rel=0” 代码 “http://www.youtube.com/embed/your_video_id?rel=0” one:

保存文件，刷新页面即可看到视频替换成功:

本教程到此结束, 你已经学会了如何在JS动画模板中管理视频样本.

请随时查看下面的详细视频教程: