master

分支 (1)

管理

管理

master

video
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视屏播放器</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #sp {
            width: 920px;
            /*宽*/
            height: 670px;
            margin: 0px auto;
            /*高+ //*水平居中*/
        }

        #sp .Con {
            width: 580px;
            height: 670px;
            float: left;
            position: relative;
            background: url("https://external-30160.picsz.qpic.cn/db73a9def52b3c367e040ec16edc7433") no-repeat center;
        }

        #sp .List {
            width: 180px;
            height: 670px;
            float: right;
        }

        #sp .Con .avi {
            width: 525px;
            height: 331px;
            position: absolute;
            /*绝对定位*/
            left: 27px;
            top: 98px;
        }

        #sp .List ul li {
            width: 171px;
            height: 152px;
            /*边框*/
            list-style-type: none;
            /*去掉圆点*/
            position: relative;
            background: url("https://external-30160.picsz.qpic.cn/136e869e54322af101718e86d5c568f5");
            margin-top: 10px;
            cursor: pointer;
        }

        #sp .List ul li .sp_pic {
            width: 151px;
            height: 94px;
            position: absolute;
            left: 10px;
            top: 8px;
        }

        #sp .List ul li img.play {
            position: absolute;
            left: 65px;
            top: 30px;
            display: none;
        }

        #sp .List ul li:hover img.play {
            display: block;
        }

        .show {
            width: 300px;
            height: 200px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="sp">
        <!--视频内容开始-->
        <div class="Con">
            <div class="avi">
                <iframe src="https://player.bilibili.com/player.html?aid=883409884&bvid=BV1PK4y1b7dt&cid=201056987&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%" height="100%"> </iframe>
            </div>
        </div>
        <!--视频内容结束-->
        <!--视频列表开始-->
        <div class="List">
            <ul>
                <li>
                    <div class="sp_pic">
                        <img src="https://external-30160.picsz.qpic.cn/8a29db6376b1d80bf0e0226effcdb1f6" width="151" height="94" dataSrc="https://player.bilibili.com/player.html?aid=883409884&bvid=BV1PK4y1b7dt&cid=201056987&page=1" />
                    </div>
                    <img src="https://external-30160.picsz.qpic.cn/c2a43b245a81994bd9ecd769cb3d6ee6" class="play" />
                </li>
                <li>
                    <div class="sp_pic">
                        <img src="https://external-30160.picsz.qpic.cn/43e8b292a114ec435e6fe659962d7166" width="151" height="94" dataSrc="https://player.bilibili.com/player.html?aid=54977211&bvid=BV1p4411T7CG&cid=96141516&page=1" />
                    </div>
                    <img src="https://external-30160.picsz.qpic.cn/c2a43b245a81994bd9ecd769cb3d6ee6" class="play" />
                </li>
                <li>
                    <div class="sp_pic">
                        <img src="https://external-30160.picsz.qpic.cn/f770639a87cf9bad66945a8256a2be20" width="151" height="94" dataSrc="https://player.bilibili.com/player.html?aid=21156181&bvid=BV1CW411g7UF&cid=34732665&page=1" />
                    </div>
                    <img src="https://external-30160.picsz.qpic.cn/c2a43b245a81994bd9ecd769cb3d6ee6" class="play" />
                </li>
                <li>
                    <div class="sp_pic">
                        <img src="https://external-30160.picsz.qpic.cn/0e232ab7812ab9a7986d2129eba646c4" width="151" height="94" dataSrc="https://player.bilibili.com/player.html?aid=57379500&bvid=BV1zx411R7ro&cid=163965636&page=1" />
                    </div>
                    <img src="https://external-30160.picsz.qpic.cn/c2a43b245a81994bd9ecd769cb3d6ee6" class="play" />
                </li>
            </ul>
        </div>
    </div>
    <div class="show">
        <h3>小卓曲库</h3>
        <h5>仅供测试使用！！</h5>
    </div>

    <script type="text/javascript" src="https://dss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>
    <script>
        $(".List ul li").click(function() {
            var aviSrc = $(this).find(".sp_pic img").attr("dataSrc");
            // $(".avi iframe").attr("src", aviSrc); //将点击事件获取的地址赋值给目标的src属性
            $(".avi").html("<iframe frameborder='0' src='" + aviSrc + "' allowFullScreen='true' width='100%' height='100%'></iframe>")
        });
    </script>
</body>

</html>