jquery实现视频播放页面滚动悬浮右下角继续播放效果代码-html代码-BFW代码库

jquery实现视频播放页面滚动悬浮右下角继续播放效果代码

代码语言：html

所属分类：多媒体

代码描述：jquery实现视频播放页面滚动悬浮右下角继续播放效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <style>
        * {
      box-sizing: border-box;
    }
    
    body {
      font-family: sans-serif;
      background: #121314;
    }
    
    #site {
      width: 600px;
      margin: 50px auto;
    }
    
    #bloc {
      display: block;
      position: static;
      overflow: hidden;
    }
    
    .box {
      margin: 10px;
    }
    
    #videoBox {
      border: 10px solid #212223;
      transition: 0.5s;
    }
    
    #commentsBox {
      float: left;
      width: 340px;
    }
    
    #suggBox {
      float: left;
      width: 220px;
    }
    
    #commentsBox > div,
    #suggBox > div {
      background: #212223;
      margin-bottom: 20px;
      padding: 20px 30px;
    }
    
    #suggBox p span {
      width: 100%;
      display: block;
      background: #924;
      height: 8px;
      margin: 10px 0;
    }
    
    #suggBox p:before {
      width: 30%;
      content: ' ';
      display: block;
      background: #121314;
      height: 8px;
      margin: 10px 0;
    }
    
    #suggBox p:after {
      width: 70%;
      content: ' ';
      display: block;
      background: #999;
      height: 8px;
      margin: 10px 0;
    }
    
    #commentsBox p span {
      width: 100%;
      display: block;
      background: #eee;
      height: 6px;
      margin: 15px 0;
    }
    
    #commentsBox p:before {
      width: 30%;
      content: ' ';
      display: block;
      background: #121314;
      height: 6px;
      margin: 10px 0;
    }
    
    #commentsBox p:after {
      width: 70%;
      content: ' ';
      display: block;
      background: #eee;
      height: 6px;
      margin: 10px 0;
    }
    
    video {
      width: 100%;
      vertical-align: bottom;
    }
    
    #videoBox.in {
      animation: ac 1s;
    }
    
    #videoBox.out {
      position: fixed;
      bottom: 0;
      right: 0;
      width: 300px;
      z-index: 999;
      animation: an 0.5s;
    }
    </style>
</head>

<body>
    <div id="site">
        <div id="videoBox" class="box">
            <video width="400" controls>
      <source src="//repo.bfw.wiki/bfwrepo/video/5d8449e2482ad.mp4" type="video/mp4">
      Your browser does not support HTML5 video. </video>
        </div>
        <div id="bloc">
            <div id="commentsBox" class="box">
                <div>
                    <p><span></span><span></span><span></span><span></span></p>
                </div>
                <div>
                    <p><span></span><span></span><span></span><span></span></p>
                </div>
                <div>
                    <p><span></span><span></span><span></span><span></span></p>
                </div>
                <div>
                    <p><span></span><span></span><.........完整代码请登录后点击上方下载按钮下载查看