全屏视频播放页的简单处理

最新推荐文章于 2024-06-03 17:36:50 发布

置顶 -T先生-

最新推荐文章于 2024-06-03 17:36:50 发布

阅读量2k

点赞数 1

分类专栏： html 文章标签： html 视频播放页面

本文链接：https://blog.csdn.net/wangji5850/article/details/50886859

版权

html 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

如图：

这里写图片描述

Html：

<!DOCTYPE html>
<html style="height:100%">

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link type="text/css" rel="stylesheet" href="../css/website.min.css" />
    <link rel="stylesheet" href="../css/jquery.mCustomScrollbar.min.css">
    <title>
        cima
    </title>
    <meta content="" name="description">
    <meta content="" name="keywords">
    <script type="text/javascript">
        var IS_LOCAL = true;var hasLogined = false;
    </script>
</head>

<body style="height:100%">
    <div class="section_wrap" style="height:100%">
        <div class="relatv full_screen video">
            <div class="clearfix relatv play_area">
                <p class="abs video_info">
                    <span class="dis_ib name">纳税评估常用指标与实际案例分析 I3-5 财务3 </span>
                    <span class="progs">正在学习：<i class="now c_blue">1课时</i>/100课时</span>
                </p>
                <div class="video_src">
                    <object width="100%" height="99%" type="application/x-shockwave-flash" data="http://player.polyv.net/videos/player.swf" id="9b038edc87e330f329463d2a5de38330_9" class="polyvFlashObject"><param name="allowScriptAccess" value="always"><param name="allowFullScreen" value="true"><param name="quality" value="high"><param name="bgcolor" value="#ffffff"><param name="wmode" value="transparent"><param name="flashvars" value="start=0&amp;end=176&amp;ban_history_time=on&amp;watchStartTime=0&amp;vid="></object>
                </div>
            </div>
            <div class="abs main_r">
                <div class="abs link">
                    <a class="trans1 menu curr" href="javascript:;" data-id="1"><span class="no_dis go_next">切换到下一节</span><i class="ico"></i>目录</a>
                    <a class="trans1 note" href="javascript:;" data-id="2"><i class="ico"></i>笔记</a>
                    <a class="trans1 discuss" href="javascript:;" data-id="3"><i class="ico"></i>讨论</a>
                    <a class="trans1 community" href="javascript:;" data-id="4"><i class="ico"></i>社区</a>
                </div>
                <div class="abs control"><i class="abs ico"></i></div>
                <div class="cont main_cont">
                    <ul class="ul for_menu">for_menu
                    </ul>
                    <div class="ul sp_ul for_note">for_note
                    </div>
                    <div class="ul sp_ul for_discs">for_discs
                    </div>
                    <div class="ul sp_ul for_comty">for_comty
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $('.main_r .link').on('click', 'a', function() {
            var _t = $(this);
            _t.addClass('curr')
                .siblings().removeClass('curr');
            $('.main_r .cont .ul').eq(_t.index()).show()
                .siblings().hide();
        });
        //右侧展开收起
        $('.full_screen .main_r').on('click', '.control', function() {
            if(!$('.full_screen').hasClass('has_spread')) {
                $(this).parent().css("width","0");
                $('.full_screen').css("padding-right","15px");
                $('.full_screen').addClass('has_spread')
            }else {
                $(this).parent().css("width","300px");
                $('.full_screen').css("padding-right","315px");
                $('.full_screen').removeClass('has_spread');
            }
        });
    });

    </script>
</body>

</html>

Css：

.relatv{position: relative;z-index: 1;}
.section_wrap{min-width: 1200px;}
.full_screen{padding-right: 315px;min-height: 320px;min-width: 885px;height: 100%;}
.play_area{background-color: #000;height: 100%;}
.full_screen .main_r{background-color: #000; right: 0;top: 0;z-index: 20;height: 100%;width: 300px;}
.video .main_r .link{left: -52px;top: 50%;z-index: 25;height: 223px;margin-top: -111.5px;}
.video .main_r .link .go_next{background-color: #444;color: #999;text-align: center;width: 100px;}
.video .main_r .link a{background-color: #676767;color: #fff;display: block;height: 37px;line-height: 37px;overflow: hidden; width: 37px;margin-bottom: 20px;}
.video .main_r .link .ico{height: 37px;width: 37px;vertical-align: top;}
.video .main_r .link a.curr{background-color: #0097DD;width: 37px;}
.video .main_r .link a:hover, video .main_r .link a.menu.curr:hover{background-color: #0097DD;margin-left: -37px; width: 74px;}
.full_screen .main_r .control{background-color: #292929;cursor: pointer;left: -15px;top: 0;z-index: 25;height: 100%;overflow: hidden; width: 15px;}
.video .main_r .main_cont, .video .main_r .main_cont .sp_ul{height: 100%;overflow: auto;width: 100%;}

效果预览 http://www.xuecima.com/course/view/44

ps:由于域名问题，此链接有可能失效。

ps:鉴于个人经验有限，所有观点，如有异议，请直接回复讨论（请勿发表攻击言论）。
加入QQ群209952809(需回答问题，答案为csdn)；群聊更快解决问题，更happy。

-T先生-

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录