文档章节

问题来了,视频滚动哪家强

Lyver
 Lyver
发布于 2015/08/18 10:31
字数 258
阅读 23
收藏 0


首先加入一段css,定义两个播放器,一个大一个小

123456
.mainplayer{  margin:auto;width:600px;height:480px;}.miniplayer{  width: 300px; height: 240px; position: fixed; top: auto; z-index: 1002; padding: 10px; opacity: 1; background: rgb(255, 255, 255);}

拷贝播放器代码到页面中

12345678910111213141516
<script src='http://static.polyv.net/file/polyvplayer_v2.0.min.js'></script><!-- container图层是为了定死高度,player图层会修改大小,避免滚动的时候播放器高度发生改变,导致计算错误--><div id="container" style="height:600px">  <div id="player" class="mainplayer">  </div></div><script>var player = polyvObject('#player').videoPlayer({  'width':'100%',  'height':'100%',  'vid' : 'sl8da4jjbx470cc826bcdd233afcc2db_s'});</script>

最后加入滚动判断的js代码

123456789101112131415161718192021222324
<script>$(function(){  $(window).scroll(function(){    //判断大播放器的高度位置    var player_postion = $('#container').offset().top + $('#container').outerHeight();      //如果滚动到的位置超过大播放器的高度,修改播放器的css为miniplayer      if($(this).scrollTop()>player_postion){                $('#player').removeClass('mainplayer');          $('#player').addClass('miniplayer');          $('#player').css('left',$(this).width()-350 + "px");          $('#player').css('bottom',"175px");      }else if($(this).scrollTop()<player_postion){                $('#player').removeClass('miniplayer');          $('#player').addClass('mainplayer');      }  });});</script>

没错,结束了,已经搞定,拉下屏幕,看看右下角。

    本文转载自:http://blog.polyv.net/blog/2014/10/21/scroll-video/

    共有 人打赏支持
    Lyver
    粉丝 0
    博文 8
    码字总数 1954
    作品 0
    广州
    私信 提问
    智能硬件创业供应商选型-环信公开课第13期

    下一个时代就是人工智能的时代,但人工智能并不是这么容易入门,它比互联网时代、移动时代门槛更高,它会涉及到语音、语义、系统、硬件。 如果有想做机器人、智能家居、智能硬件等想法,选择...

    环信
    2017/05/15
    2
    0
    智能硬件创业供应商选型-环信公开课第13期

    下一个时代就是人工智能的时代,但人工智能并不是这么容易入门,它比互联网时代、移动时代门槛更高,它会涉及到语音、语义、系统、硬件。 如果有想做机器人、智能家居、智能硬件等想法,选择...

    环信
    2017/05/15
    0
    0
    谁有能锁屏不崩溃的录屏软件给推荐个。。。。

    最近买了个apowersoft的录屏王(没办法,有些操作描述半天还不如一波视频带走)结果突发奇想打算把这个玩意当作日志记录器用,回滚自己做过的骚操作(嗯,就是研究一下自己究竟是怎么把电脑玩...

    Oh_really
    2018/08/03
    0
    0
    php电子政务哪家强?

    都说php好,那么问题来了,php电子政务哪家强? 有没哪家企业用php做电子政务比较优秀的,推荐或者自荐下?

    梅开源
    2015/02/05
    138
    1
    Android视频直播、点播播放器哪家强?

    最近在项目中要加入视频直播和点播功能,那么问题来了,我需要一个播放器来播放视频流,那该如何选择呢?除了原生的VideoView(VideoView表示臣妾做不到啊),还有一些播放器如Vitamio,B站开...

    沉默的范大叔
    2017/11/29
    0
    0

    没有更多内容

    加载失败,请刷新页面

    加载更多

    day11

    architect刘源源
    今天
    7
    0
    论学好Linux系统的超级重要性

    不知道各位在日常的工作生活中有没有接触过“rm -rf /*”这个命令,因为这个命令搞出来的事情可还不少呢!前段时间就在一个群里看到了有个小伙子,老板让他去维护一下服务器,这小伙也不太懂...

    Linux就该这么学
    昨天
    6
    0
    git 使用

    1,首先在github配置好信息和仓库,然后在本地进行操作 git init git config user.name 'zhangwuer' git config user.email '56789053@qq.com' 2,与远程分支建立连接 git checkout -b test......

    天王盖地虎626
    昨天
    3
    0
    git checkout 命令详解

    在日常的git操作中,git checkout——检出,是我们的常用命令。最为常用的两种情形是创建分支和切换分支。 在下面的命令中,使用了一些简写,在这里说明一下: git st # git statusgit ci ...

    shzwork
    昨天
    11
    0
    【Nginx】Nginx多级代理,获取客户端真实请求IP以及每级代理IP

    Nginx多级代理,获取客户端真实请求IP以及每级代理IP 如图所示,每一级nginx里的location配置里需要加上对应的配置,最后一级nginx是直接到应用,测试时为了方便,直接用echo模块去测试,打印...

    薛定谔的旺
    昨天
    8
    0

    没有更多内容

    加载失败,请刷新页面

    加载更多

    返回顶部
    顶部