假如我有个图片列表，要求是点击里面的图片，然后弹出不同的视频弹窗。问题来了，这个视频数据是如何拿到的呢？
我目前知道：
1、直接把视频数据绑定到图片的属性上（data)，然后点击getAttribute()方法获取
2、来个json数据集，点击图片的index来获取
不知道还有其他方便的、或者其他公司是怎么做的呢
只是一个想法，不知是否符合你：
你有想过当点击的时候去发请求么，带着相应的参数，比如你说的图片的index，来获取你需要的数据。
像你那样处理，是用户有需求要看所有的弹窗中的数据咩？
只是一种想法。。。表喷我！
如果要是跳转的话可以把目标写在A上，如果要弹窗的话用data-*属性不是挺好的。或者异步的方式来加载。
video有一个poster,可以放一张预图片
A URL indicating a poster frame to show until the user plays or seeks. If this attribute isn't specified, nothing is displayed until the first frame is available; then the first frame is displayed as the poster frame.
链接：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
看了一下优酷和乐视的，
乐视的源代码是给图片一个链接：
<a title="三分钟看跑男" target="_blank" href="http://zongyi.letv.com/izt/bpbxddej/index.html"><img data-src="http://i3.letvimg.com/lc03_isvrs/201505/18/09/30/0a0f455a-bd9b-42ef-8ded-93783361a5e9/thumb/2_200_150.jpg" alt="三分钟看跑男" src="http://i3.letvimg.com/lc03_isvrs/201505/18/09/30/0a0f455a-bd9b-42ef-8ded-93783361a5e9/thumb/2_200_150.jpg" style="display: block;"><b class="bg"></b></a>
优酷在img上也定义了src和_src，但链接还是定义在a上，然后利用定位。
给 A 绑定 click 事件，event.preventDefault()，这样就不会跳转啦。