在网页点击一个链接播放一个视频，有很多不同的链接怎么用动态写

图片说明

每一张图片都有一段视频（图片有很多从数据取的），怎么实现
点一张图片播放一段视频，大佬求给个思路最好是能写出来

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>视频</title>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
    <img src="11.jpg" data-video="1.mp4" class="show_btn" />
    <img src="22.jpg" data-video="2.mp4" class="show_btn" />
    <img src="33.jpg" data-video="3.mp4" class="show_btn" />

    <div class="video_area" style="display:none;position:fixed;z-index:99;top:0;left:0;">
        <video autoplay controls src="" class="video"></video>
        <br/>
        <input type="button" class="close_btn" value="关闭" style="width:120px;margin:10px 0 0 300px;" />
    </div>

<script type="text/javascript">
$(function(){
    //查看视频
    $('.show_btn').click(function(){
        var video_url = $(this).attr('data-video');
        $('.video_area').show();
        $('.video').attr('src',video_url);
    })

    //关闭
    $('.close_btn').click(function(){
        $('.video').attr('src','');
        $('.video_area').hide();
    })
})
</script>
</body>
</html>

用Ajax写，点击一下图片就发送一个异步请求然后处理就行了 /**
* 点击图片加载视频
/
$(#id).click(function () {
$.ajax({
url:xxxxxx ,
success:function (data) {
/*
* 获取数据往处理
*/
}
})
})

给img中的a标签设置自定义属性把图片对应的视频路径给这个A标签页面存放一个隐藏的Video 点击图片时把路径给Video并取消隐藏开始播放