Whales_w 2019-08-20 16:58 采纳率: 60%
浏览 895
已采纳

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

图片说明

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

  • 写回答

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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？