欢迎来到php自学网~
阅读模式:

jquery+video实现点击播弹窗放视频功能

查看:5799  回复:0  类型:  来源:php自学网  标签 jquery html5


jquery+video实现点击播放视频功能,播放视频弹窗,关闭窗口关闭视频。当点击某个节点的时候把已经用javascript拼接好的video标签并带视频路径和视频缩略图信息的dom写入到指定的dom中,实现列表点击播放的功能。

<div class="video">
    <div class="container">
        <div class="videolist" vpath="uploads/2016/1.jpg" ipath="uploads/2016/1.mp4"><!-视频列表->
            <div class="vtit">视频1</div>
            <img src="uploads/2016/视频1.jpg" width="540px" height="300px" />
            <div class="vtime">2016-10-18</div>
            <img src="static/images/videoed.png" class="videoed"/>
        </div>
        <div class="videolist" vpath="uploads/视频2.jpg" 
        ipath="uploads/2016/2.mp4">
            <div class="vtit">视频2</div>
            <img src="uploads/2016/视频2.jpg" width="540px" height="300px" />
            <div class="vtime">2016-11-30</div>
            <img src="static/images/videoed.png" class="videoed"/>
        </div>        
       
    </div>
</div>
<script>
    var v = document.getElementById('video');//获取视频节点
    $('.videolist').each(function(){ //遍历视频列表
        $(this).hover(function(){ //鼠标移上来后显示播放按钮
           $(this).find('.videoed').show();
        },function(){
           $(this).find('.videoed').hide();
        });
        $(this).click(function(){ //这个视频被点击后执行
           var img = $(this).attr('vpath');//获取视频预览图
           var video = $(this).attr('ipath');//获取视频路径
                    $('.videos .container').html("<video id="video" poster='"+img+"' src='"+video+"' preload="auto" controls="controls" autoplay="autoplay"></video>//把video写入容器播放
           <img onClick="close1()" class="vclose" src="static/images/close.png" width="25" height="25"/>");//关闭
            $('.videos').show();
        });
    });
    
    function close1(){ 
       $('.videos').hide();//点击关闭按钮关闭暂停视频
       v.pause(); 
    }
</script>


分享到:
1 5

*有问题之处烦请在评论中指出非常感谢!
不是我想要的内容,继续搜索:

扫描二维码手机查看

发布评论:


登录:
  表情:
评论话题
推荐阅读:
centos 7 忘记root密码   阅读:1131centos 7 安装 php-7.1.3   阅读:7124linux时间戳有趣的情人节秒1234567890   阅读:983mysql共享锁和排他锁详解   阅读:1577程序员找工作三要素(必看)   阅读:1377封装php redis缓存操作类   阅读:1474知乎百万赞作者告诉你:年薪百万的人都在靠什么赚钱   阅读:1079centos 7 安装 php-7.1.3   阅读:7124一键分享到QQ空间、QQ好友、新浪微博、微信代码   阅读:6758php删除一个文件夹内的所有文件夹和文件   阅读:1501企业让你去面试,可能不是真的招人   阅读:1385面试都会问你为什么你从上一家公司离职的真实意思   阅读:2914PHP 鸟哥:我也曾经是“不适合”编程的人   阅读:2314最简单的Banner轮播左右切换效果代码及实现思路(附带源码)   阅读:10896php中地址引用&的真正理解-变量引用、函数引用、对象引用   阅读:1225移动端自适应rem原理   阅读:4519web性能测试工具ab的测试方法   阅读:1272最简单的Banner轮播左右切换效果代码及实现思路(附带源码)   阅读:10896面试的时候回去等通知,等电话的真实意思   阅读:5480centos 7 开启网络   阅读:1459小米手机端商城rem适配原理   阅读:2588面试的时候和你谈理想,是理想or入坑?   阅读:1222mongodb设置shell开机启动脚本   阅读:1335给 centos 7 安装桌面环境   阅读:7414把php session 会话保存到redis   阅读:1950php 获取当前前后年、月、星期、日、时分秒的时间   阅读:1706mysql5.7开启sql日志的配置   阅读:1563最新centos7 搭建LNMP环境(centos7.2+php7+mysql5.7+nginx1.11+redis3.2)   阅读:3281linux top命令详解   阅读:1260什么是天使轮?什么是A轮融资?B轮融资?   阅读:908程序员找工作三要素(必看)   阅读:1377用php从1加到100的值   阅读:2717Nginx 配置文件详解   阅读:1367移动端自适应rem原理   阅读:4519centos7开启交换内存   阅读:2014shell脚本批量删除几天前的文件   阅读:1727linux top命令详解   阅读:1260php 使用 smtp.php 类在线发送邮件功能   阅读:1616php中地址引用&的真正理解-变量引用、函数引用、对象引用   阅读:1225mysql5.7开启sql日志的配置   阅读:1563面试都会问你为什么你从上一家公司离职的真实意思   阅读:2914十张GIF让你弄懂递归等概念   阅读:1485PHP 鸟哥:我也曾经是“不适合”编程的人   阅读:2314shell脚本统计当前服务器并发连接数   阅读:1536mysql数据一键导出到csv文件   阅读:1477centos 7 安装 redis 3.2.9   阅读:2196十张GIF让你弄懂递归等概念   阅读:1485给网站添加一键qq登录的功能   阅读:2032web项目高并发量网站解决方案   阅读:1161解决 nginx 413 request entity too large   阅读:1166