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

图片说明

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

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

3条回答默认最新

火蚂蚁cui 2019-08-21 10:15

关注

<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>

本回答被题主选为最佳回答 , 对您是否有帮助呢?