点击图片，弾出视频播放框

最新推荐文章于 2023-03-25 12:43:20 发布

ansou3280

最新推荐文章于 2023-03-25 12:43:20 发布

阅读量397

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/huahua0825/p/9041395.html

版权

第一个页面：video.html

<!DOCTYPE html>
<html>
<head>
    <title>视频播放</title>
    <link rel="stylesheet" type="text/css" href="default/layer.css">
</head>
<body>
    <img src="images/about_video3.jpg" id="videoPlay">
</body>
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/layer.js"></script>
<script type="text/javascript" src="js/video.js"></script>

第二个页面：brandvideo.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="css/zy.media.min.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/zy.media.min.js"></script>
    <style type="text/css">
        #modelView {
            background-color: #DDDDDD;
            z-index: 0;
            opacity: 0.7;
            height: 100%;
            width: 100%;
            position: relative;
        }

        .playvideo {
            padding-top: auto;
            z-index: 9999;
            position: relative;
        }

        .zy_media {
            z-index: 999999999
        }
    </style>


</head>
<body onmousewheel="return false;">

    <div class="playvideo">
        <div class="zy_media">
            <video poster="images/about_video3.jpg">
                    <source src="images/omvideo.mp4" type="video/mp4">
                    您的浏览器不支持HTML5视频
           </video>
</div>
        <div id="modelView">&nbsp;</div>
    </div>

    <script>
        window.onload = function () {
            //document.documentElement.style.overflow='hidden';
            document.body.style.overflow = 'hidden';
            zymedia('video', { autoplay: true });
            var screenheight = window.screen.height / 2;
            //$("#modelView").width(window.screen.width);
            //$("#modelView").height(window.screen.height);
            var videoheight = $(".zy_media").height() / 2;
            var padding_top = screenheight - videoheight;
            //$(".playvideo").css({ "top": padding_top });
            $("#modelView").css({ "margin-top": -1 * (padding_top + $(".zy_media").height()) });
        }
    </script>
</body>
</html>

js: video.js

window.onload = function () {
    $("#videoPlay").click(function () {
        layer.open({
            type: 1,
            title: '视频',
            skin: 'layui-layer-rim',
            area: ['720px', '450px'],
            content: '<iframe src="brandvideo.html" width="100%" height="100%"></iframe>'
        });
    });
}

转载于:https://www.cnblogs.com/huahua0825/p/9041395.html

ansou3280

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
点击图片，弾出视频播放框

第一个页面：video.html<!DOCTYPE html><html><head> <title>视频播放</title> <link rel="stylesheet" type="text/css" href="default/layer.css"></head&g...
复制链接

扫一扫