码迷,mamicode.com
首页 > Web开发 > 详细

H50072:html 视频播放 按钮 及容器

时间:2021-03-05 13:27:13      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:rgba   节点   osi   auto   --   按钮   radius   element   ide   

1,HTML及 JS 代码

    <!-- 视频播放 -->
    <div class="video home_video">
        <div class="videolist" vpath="video/1.mp4" ipath="video/6.mp4"><img src="common/images/theme/default/video_icon.png"></div>
    </div>
    <div class="videos">&nbsp;</div>
    <script type="text/javascript">
        $(.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).html("<video id=\"video\" poster=‘" + img + "‘ style=‘width: 100%; height:100%‘ src=‘" + video + "‘ preload=\"auto\"  autoplay=\"autoplay\"></video><img onClick=\"close1()\" class=\"vclose\" src=\"product/gb.png\" width=\"25\" height=\"25\">");
                $(.videos).show();
            });
        });
        function close1() {
            var v = document.getElementById(video); //获取视频节点
            $(.videos).hide(); //点击关闭按钮关闭暂停视频
            v.pause();
            $(.videos).html();
        }
    </script>

 

2,CSS代码

.videolist {
    position: relative;
    float: left;
}

.videolist:hover {
    cursor: pointer;
}

.videos {
    display: none;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
}

.vclose {
    position: absolute;
    right: 1%;
    top: 1%;
    border-radius: 100%;
    cursor: pointer;
}

.home_video {
    position: fixed;
    top: 40px;
    left: 40px;
    float: inherit;
}

 

H50072:html 视频播放 按钮 及容器

标签:rgba   节点   osi   auto   --   按钮   radius   element   ide   

原文地址:https://www.cnblogs.com/eliteboy/p/14484668.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!