zoukankan      html  css  js  c++  java
  • H50072:html 视频播放 按钮 及容器

    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=' 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;
    }
    琥珀君的博客
  • 相关阅读:
    使用Koa搭建一个mock服务器
    d3 使用记录: 树形图
    转载: 矩阵的运算及运算规则
    d3 使用记录: 插值
    d3 使用记录: Selection
    转载: javascript 模块化历程
    Git 常用操作
    贝塞尔曲线_初探
    css 基础-
    Freemarker模板语法
  • 原文地址:https://www.cnblogs.com/eliteboy/p/14484668.html
Copyright © 2011-2022 走看看