按一下图片 .. 可以播放它上面的视频 .. 再找一个项目 .. 按一图片，同样会播放视频 .. 现在这个页面上同时会有两个视频播放 ..

我想改进一下，让同一页面同时只能播放一个视频 ..

打开这个页面的主逻辑文件 .. 在页面的数据里面，添加一个 currentVid .. 先让它等于 null .. 再添加一个 currentVideo .. 它的值也是 null ..

在改造一下这个 play 方法 .. 下面用一下 this.setData .. 设置一下页面上的 currentVideo .. 对应的值就是上面我们用 createVideoContext 创建的东西 .. 然后再把 currentVid ，设置成 event.target.dataset.vid .. 就是当前被按的图像上的 data-vid 属性的值 .. 这个值跟它上面的视频上的 id 是一样的 ..

每次点了图片，我们都重新设置一下这个 currentVid 的值 .. 在最上面，可以再判断一下 .. 如果 this.data.currentVid 不等于 null .. 我们就用一下 this.data.currentVideo 的 pause() 方法停止播放视频 ..

这里停止的就是上一个正在播放的视频 ..

预览

再去预览一下 .. 按一下图片 .. 会播放上面这个视频 ... 再找一个图片 .. 按一下 .. 同样会播放它上面的视频 .. 不过这次会停止之前播放的这个视频 ...

视图

现在我们再去改进一下故事列表视图 .. 先在 video 上面添加一个 hidden .. 绑定一个 hidden="{{ currentVid !== item.id }}" .. 如果当前播放的视频不是这个视频，我们就把视频组件隐藏起来 ..

在 image 上也得添加一个 hidden .. 绑定的是 {{ currentVid == item.id }} .. 意思就是，如果当前播放的视频是这个图片上面这个，就把这个图片隐藏起来 ..

预览

再到模拟器上预览一下 .. 按一下图片，会隐藏图片，显示并且播放视频 ... 再按一下其它的图片 .. 同样会播放视频 ..

同时之前播放的视频会停止 .. 显示出原来的图片 ..