get_more_video.html 5.5 KB
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>星域秀场--星球影院</title>
    <link rel="stylesheet" href="__TMPL__/public/assets/css/show.css">
</head>

<body>
    <!-- 弹出框 -->
    <div class="video_mask">
        您还不是VIP,可试看15秒
    </div>
    <div class="show_9 clearfix">
        <!-- 视频 -->
        <div class="show_9_video">
            <img class="video_poster" src="__TMPL__/public/assets/starImg/bicon_28.png" alt="">
            <video id="video" width="100%" height="426" src="__TMPL__/public/assets/starImg/video.mp4"></video>
            <img class="play_button" onclick="bofang()" src="__TMPL__/public/assets/starImg/aicon_30.png" alt="">
        </div>
        <!-- 视频侧边选择 -->
        <div class="show_9_video_aside">
            <!-- 顶部 -->
            <div class="show_9_video_asideTie clearfix">
                <p>专辑</p>
                <div class="select">
                    <input type="text" value="中国" readonly="readonly">
                    <img src="__TMPL__/public/assets/starImg/down.png" alt="">
                    <ul>
                        <li>中国</li>
                        <li>美国</li>
                    </ul>
                </div>
            </div>
            <!-- 视频 -->
            <div class="show_9_video_asideCon">
                <ul class="curren video_active">
                    <li class="clearfix">
                        <img src="__TMPL__/public/assets/starImg/bicon_29.png" alt="">
                        <p>
                            令人神往的 蒙大拿州
                        </p>
                    </li>
                    <li class="clearfix">
                        <img src="__TMPL__/public/assets/starImg/bicon_29.png" alt="">
                        <p>
                            令人神往的 蒙大拿州
                        </p>
                    </li>
                    <li class="clearfix">
                        <img src="__TMPL__/public/assets/starImg/bicon_29.png" alt="">
                        <p>
                            令人神往的 蒙大拿州
                        </p>
                    </li>
                    <li class="clearfix">
                        <img src="__TMPL__/public/assets/starImg/bicon_29.png" alt="">
                        <p>
                            令人神往的 蒙大拿州
                        </p>
                    </li>
                    <li class="clearfix">
                        <img src="__TMPL__/public/assets/starImg/bicon_29.png" alt="">
                        <p>
                            令人神往的 蒙大拿州
                        </p>
                    </li>
                </ul>
                <ul class="curren">
                    <li class="clearfix">
                        <img src="__TMPL__/public/assets/starImg/bicon_29.png" alt="">
                        <p>
                            令人神往的 蒙大拿州
                        </p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 底部 -->
        <div class="show_9_video_asideTxt clearfix">
            <!-- 标题 -->
            <h1>令人神往的蒙大拿州弗里德黑德湖</h1>
            <!-- 国家 -->
            <div class="show_9_video_asideTxt2">
                <p>国家:美国</p>
                <p>取景:蒙大拿州弗里德黑德湖</p>
                <p>上映时间:2019-11-12</p>
            </div>
            <!-- 分享 -->
            <div class="show_9_video_asideTxt3 clearfix">
                <p>分享:</p>
                <img src="__TMPL__/public/assets/starImg/aicon_89.png" alt="">
                <img src="__TMPL__/public/assets/starImg/aicon_90.png" alt="">
            </div>
        </div>
    </div>
    <script src="__TMPL__/public/assets/js/jquery-3.2.1.min.js"></script>
    <script>
        // 星域秀场视频
        $(function() {
                $('.select input').click(function() {
                    if ($(this).next('img').attr('src') == "__TMPL__/public/assets/starImg/down.png") {
                        $(this).next('img').attr('src', "__TMPL__/public/assets/starImg/up.png")
                        $('.select ul').toggle();
                    } else {
                        $(this).next('img').attr('src', "__TMPL__/public/assets/starImg/down.png")
                        $('.select ul').toggle();
                    }

                })

                $('.select ul li').click(function() {
                    $('.select input').val($(this).text());
                    $('.select ul').hide();
                    var index = $(this).index();
                    $('.curren').eq(index).addClass('video_active').siblings().removeClass('video_active');
                });

                $(document).ready(function() {
                    var val = $('.select input').val();
                    var val2 = $('.select ul li:first-child').text();
                    val = val2;
                    $('.select input').val(val)
                })

                // 弹出框
                setInterval(function() {
                    $('.video_mask').hide();
                }, 4000)
            })
            // 点击播放
        function bofang() {
            video.play();
            $('#video').attr('controls', 'controls')
            $('.show_9_video img').hide();
        }
    </script>
</body>

</html>