仿视频弹幕实战

最新推荐文章于 2024-07-25 10:45:42 发布
最新推荐文章于 2024-07-25 10:45:42 发布
阅读量939 收藏 1
点赞数 1
分类专栏： 前端 文章标签： js css jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cjq2013/article/details/76283978
版权
  1. 新建一个div盒子，在内部添加标题，并设置样式
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
          .box{
            width:1000px; /*设置宽度1000px*/
          text-align:center;/*内容居中*/
          margin:0 auto;/*div盒子居中*/
          position: relative;
          border:1px solid red;
          }
           h1{
            color:white;/*颜色*/
            text-shadow:2px 2px 5px #000;/*文字阴影*/
            }
          /*-------------------接上一步---------------*/
        </style>
    </head>
    <body>

        <div class="box">
            <h1>DM system</h1>
            <!-------------------接上一步---------------------->
            <embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=z0505anyykp&auto=0" allowFullScreen="true" quality="high" width="800" height="500" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
        </div>
    </body>
</html>

效果图：
这里写图片描述
3. 添加一层透明的弹幕层，添加开始弹幕和关闭弹幕按钮以及弹幕初始数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
          .box{
            width:1000px; /*设置宽度1000px*/
          text-align:center;/*内容居中*/
          margin:0 auto;/*div盒子居中*/
          position: relative;
          border:1px solid red;
          }
           h1{
            color:white;/*颜色*/
            text-shadow:2px 2px 5px #000;/*文字阴影*/
            }
          /*-------------------接上一步---------------*/
      .dm{width:800px;height:474px;
      background:rgba(41,31,31,0);/*颜色透明*/
      margin:0 auto;/*居中显示*/
      position: absolute;/*相对dm*/
      top:60px;left:100px;
      z-index: 11;/*层叠*/
      }
      .dm_show{color:white;position: relative;}/*弹幕内容*/
      .dm_show div{position: absolute;top:76px;right:0px;line-height:36px;font-size:22px}
      .s_dm{display: block;width:40px;height:40px;line-height:40px;border:1px solid #fff;
      position:absolute;top:75px;left:107px;background:gray;color:#fff;z-index:100;
      border-radius:20px;/*圆角*/
      text-decoration:none}/*去除超链接下划线*/
      .e_dm{display: block;width:40px;height:40px;line-height:40px;border:1px solid #fff;
      position:absolute;top:14px;right:10px;background:gray;color:#fff;z-index:100;
      border-radius:20px;text-decoration:none;}

        </style>
    </head>
    <body>

        <div class="box">
            <h1>DM system</h1>
            <embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=z0505anyykp&auto=0" allowFullScreen="true" quality="high" width="800" height="500" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
            <!-------------------接上一步---------------------->
          <a class="s_dm" href="javascript:void(0)">弹幕</a>
        <!-- 弹幕开始-->
        <div class="dm">
            <a href="javascript:void(0)" class="e_dm">X</a>
            <div class="dm_show" >
                <div>未来会变得更好</div>
                <div>越努力越幸运</div>
                <div>微笑面对生活</div>
                <div>脚踏实地</div>
                <div>沉淀蜕变</div>
              <div>远离浮躁</div>
            </dm>
        </div>
        <!-- 弹幕结束-->
        </div>
    </body>
</html>

效果图：
这里写图片描述
4. 增加发送弹幕文本框以及发送按钮

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
          .box{
            width:1000px; /*设置宽度1000px*/
          text-align:center;/*内容居中*/
          margin:0 auto;/*div盒子居中*/
          position: relative;
          border:1px solid red;
          }
           h1{
            color:white;/*颜色*/
            text-shadow:2px 2px 5px #000;/*文字阴影*/
            }
      .dm{width:800px;height:474px;
      background:rgba(41,31,31,0);/*颜色透明*/
      margin:0 auto;/*居中显示*/
      position: absolute;/*相对dm*/
      top:60px;left:100px;
      z-index: 11;/*层叠*/
      }
      .dm_show{color:white;position: relative;}/*弹幕内容*/
      .dm_show div{position: absolute;top:76px;right:0px;line-height:36px;font-size:22px}
      .s_dm{display: block;width:40px;height:40px;line-height:40px;border:1px solid #fff;
      position:absolute;top:75px;left:107px;background:gray;color:#fff;z-index:100;
      border-radius:20px;/*圆角*/
      text-decoration:none}/*去除超链接下划线*/
      .e_dm{display: block;width:40px;height:40px;line-height:40px;border:1px solid #fff;
      position:absolute;top:14px;right:10px;background:gray;color:#fff;z-index:100;
      border-radius:20px;text-decoration:none;}
       /*-------------------接上一步---------------*/
      .send{
        width:600px;
        height: 40px;
        position: absolute;
        top:517px;
        left: 10px;
        margin: 0 auto;
       }
      .send .s_btn{
      width:82px;height:30px;
      display:block;/*设置为块级元素*/
      background:#ff8140;
      float:right;/*右滑动*/
      margin:4px 20px 0 0;
      border-radius:3px;/*圆角*/
      text-decoration:none;/*去a标签下划线*/
      text-align:center;/*文字左右居中*/
      line-height:30px;/*文字上下居中*/
      font-size:14px;color:#FFF;}/*字体大小颜色*/
      .send .s_txt{width:400px;height: 26px;
      border:1px solid #E1E1E1;
      outline: none;
      position: absolute;
      top:4px;left: 97px;}

        </style>
    </head>
    <body>

        <div class="box">
            <h1>DM system</h1>
            <embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=z0505anyykp&auto=0" allowFullScreen="true" quality="high" width="800" height="500" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

          <a class="s_dm" href="javascript:void(0)">弹幕</a>
        <!-- 弹幕开始-->
        <div class="dm">
            <a href="javascript:void(0)" class="e_dm">X</a>
            <div class="dm_show" >
                <div>未来会变得更好</div>
                <div>越努力越幸运</div>
                <div>微笑面对生活</div>
                <div>脚踏实地</div>
                <div>沉淀蜕变</div>
              <div>远离浮躁</div>
            </dm>
        </div>
        <!-- 弹幕结束-->
         <!-------------------接上一步---------------------->
         <!--发送弹幕-->
        <div class="send">
             <input type="text" class="s_txt"/>
             <a href="javascript:void(0)" class="s_btn">发表评论</a>
        </div>
        </div>
    </body>
</html>

效果图：
这里写图片描述
5. 使用Jquery设置动态页面，初始时开启弹幕按钮不显示，显示主体弹幕，主体弹幕右上角有关闭弹幕按钮，点击时弹幕消失，显示弹幕开启按钮，点击弹幕开启按钮时，自身消失，弹幕显示。
则开启弹幕按钮与弹幕状态相反，切换时一个显示一个不显示
弹幕实现动态展示，每一个弹幕记录从不同高度，以不同的速度，随机的颜色，从右向左移动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
          .box{
            width:1000px; /*设置宽度1000px*/
          text-align:center;/*内容居中*/
          margin:0 auto;/*div盒子居中*/
          position: relative;
          border:1px solid red;
          }
           h1{
            color:white;/*颜色*/
            text-shadow:2px 2px 5px #000;/*文字阴影*/
            }
      .dm{width:800px;height:474px;
      background:rgba(41,31,31,0);/*颜色透明*/
      margin:0 auto;/*居中显示*/
      position: absolute;/*相对dm*/
      top:60px;left:100px;
      z-index: 11;/*层叠*/
      }
      .dm_show{color:white;position: relative;}/*弹幕内容*/
      .dm_show div{position: absolute;top:76px;right:0px;line-height:36px;font-size:22px}
      .s_dm{display: block;width:40px;height:40px;line-height:40px;border:1px solid #fff;
      position:absolute;top:75px;left:107px;background:gray;color:#fff;z-index:100;
      border-radius:20px;/*圆角*/
      text-decoration:none}/*去除超链接下划线*/
      .e_dm{display: block;width:40px;height:40px;line-height:40px;border:1px solid #fff;
      position:absolute;top:14px;right:10px;background:gray;color:#fff;z-index:100;
      border-radius:20px;text-decoration:none;}
       /*-------------------接上一步---------------*/
      .send{
        width:600px;
        height: 40px;
        position: absolute;
        top:517px;
        left: 10px;
        margin: 0 auto;
       }
      .send .s_btn{
      width:82px;height:30px;
      display:block;/*设置为块级元素*/
      background:#ff8140;
      float:right;/*右滑动*/
      margin:4px 20px 0 0;
      border-radius:3px;/*圆角*/
      text-decoration:none;/*去a标签下划线*/
      text-align:center;/*文字左右居中*/
      line-height:30px;/*文字上下居中*/
      font-size:14px;color:#FFF;}/*字体大小颜色*/
      .send .s_txt{width:400px;height: 26px;
      border:1px solid #E1E1E1;
      outline: none;
      position: absolute;
      top:4px;left: 97px;}

        </style>
    </head>
    <body>

        <div class="box">
            <h1>DM system</h1>
            <embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=z0505anyykp&auto=0" allowFullScreen="true" quality="high" width="800" height="500" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

          <a class="s_dm" href="javascript:void(0)">弹幕</a>
        <!-- 弹幕开始-->
        <div class="dm">
            <a href="javascript:void(0)" class="e_dm">X</a>
            <div class="dm_show" >
                <div>未来会变得更好</div>
                <div>越努力越幸运</div>
                <div>微笑面对生活</div>
                <div>脚踏实地</div>
                <div>沉淀蜕变</div>
              <div>远离浮躁</div>
            </dm>
        </div>
        <!-- 弹幕结束-->
         <!--发送弹幕-->
        <div class="send">
             <input type="text" class="s_txt"/>
             <a href="javascript:void(0)" class="s_btn">发表评论</a>
        </div>
        </div>
     <!-------------------接上一步---------------------->
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">

               $(function(){
                 $(".s_dm").toggle();//初始化时不显示开启弹幕按钮，弹幕是打开的
                     $(".s_dm").click(function(){
                         $(".dm,.s_dm").toggle("slow");//点击时开启弹幕按钮和弹幕同时切换状态，且它们状态相反
                     })
                     $(".e_dm").click(function(){
                        $(".dm,.s_dm").toggle("slow");//点击时开启弹幕按钮和弹幕同时切换状态，且它们状态相反
                     })
                     init_screen();//初始化弹幕
                     $(".s_btn").click(function(){ //单击发送弹幕时，内容加入到弹幕
                          var value=$(".s_txt").val();
                          var tmpDiv=$("<div>"+value+"</div>");
                          $(".dm_show").append(tmpDiv);
                          init_screen();  //发送新的内容重新初始化弹幕
                     });
                     //初始化屏幕
                     function init_screen(){
                        var _top=0;
                        $(".dm_show").find("div").show().each(function(){//获取每一个弹幕内容div
                            _top=_top+76;     //每一个比上一个距离增加76
                            if(_top>=$(".dm").height()-100){//弹幕内容超出弹幕
                                _top=0;     //重新到回到顶部
                            }
                            //div的left
                            var _left=$(".dm").width()-$(this).width();//可移动的正距离
                            //设置文字的初始位置 随机颜色
                            $(this).css({left:_left,top:_top,color:getRandomColor()});
                             //让每个div时间不一样
                             var time=Math.ceil(800+Math.random()*10000);

                             //动起来
                             $(this).animate({left:"-"+_left+"px"},time,function(){
                                    $(this).remove();
                             });
                        })
                     }
               });
               function getRandomColor(){//随机颜色
                 var str=Math.ceil(Math.random()*16777215).toString(16);
                 while(str.length<6){
                     str='0'+str;
                 }
                 return "#"+str;
               }

   </script>
    </body>
</html>
晨风&
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序抖音实战-小视频弹幕
zhenghhgz的博客
08-30 2408
如果你去抖音只是为了看小视频就少了一大乐趣，评论区才是最有趣的地方，边看视频边看评论的弹幕是不是更有意思 首先看下效果图 预览效果截图 实现思路 把最新的评论以弹幕的方式展示出来，随机生成字体颜色 局部代码变动 1. 增加一个随机颜色生成算法 functiongetRandomColor(){ letrgb=[] for(leti=0;i&lt...
最新Android高仿云音乐企业级项目实战
ixuea的博客
05-19 936
这是一门使用Java语言，从0开发一个Android平台，接近企业级的项目（我的云音乐），课程包含了基础内容，高级内容，项目封装，项目重构等知识；不会深入到源码讲解某个知识点，以及原理，但会粗略的讲解下基础原理；主要是讲解如何使用系统功能，流行的第三方框架，第三方服务，完成接近企业级商业级项目，目的是让大家，学到真正的企业级项目开发技术。
最新websocket+netty实时视频弹幕交互功能（Java版），成功入职头条月薪35K
2401_84584817的博客
05-14 406
关于面试刷题也是有方法可言的，建议最好是按照专题来进行，然后由基础到高级，由浅入深来，效果会更好。这份面试文档当然不止这些内容，实际上像JVM、设计模式、ZK、MQ、数据结构等其他部分的面试内容均有涉及，因为文章篇幅，就不全部在这里阐述了。/*** +/|/*/// 用于记录和管理所有客户端的channel@Override// 获取客户端传输过来的消息System.err.println(“收到消息：”+ content);
仿斗鱼直播的弹幕效果实现
u011277123的博客
10-19 4931
原创 2016-10-18 郭霖 郭霖 郭霖 郭霖 微信号 guolin_blog 功能介绍 Android技术分享平台，每天都有优质技术文章推送。你还可以向公众号投稿，将自己总结的技术心得分享给大家。 今日科技快讯 这两天最大的科技新闻莫过于神舟十一号升空了。10月17日上午7点30分，神舟十一号于酒泉卫星发射中心顺利发射，航天员由景海鹏
SpringBoot 仿B站后端项目实战 Day01
aixuexie的博客
03-15 4563
SpringBoot 仿B站后端项目实战 1. 搭建环境 1）项目架构 业务（功能）架构 用户服务： 注册登录 /大会员权限/ 查找视频 在线视频流播放+实时弹幕 管理后台 视频上传/数据统计/系统消息推送 技术架构 SpringBoot + MySql + Mybatis + Maven 部署架构 前端 ： 服务转发 + 负载均衡
websocket+netty实时视频弹幕交互功能（Java版）
架构文摘
09-02 289
原文：binhao.blog.csdn.net/article/details/1126316422021年了，还有不支持弹幕的视频网站吗，现在各种弹幕玩法层出不穷，抽奖，ppt都上弹幕玩...
Android弹幕功能实现，模仿斗鱼直播的弹幕效果
Tomes.V.White
04-28 1758
Android，弹幕，实战，特效，UI，斗鱼
SpringBoot实战——仿b站项目（一）
weixin_52880572的博客
03-18 1773
热部署就是当应用程序这种运行的时候升级冉家或者修改某一部分代码、配置文件时，无需手动启动应用，即可修改的部分生效工具 + IDEA配置。
kotlin手机影视实战
q327192368的博客
09-23 402
vitamio和ijkplayer（bilibili开源）框架 首先创建项目，搭建环境 首先修改style.xml,（修改为NoActionBar） 在这里插入代码片<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your the
项目实战-仿bilibili刷新按钮的实现
GitLqr的博客
10-24 7574
一、简述       最近跟小伙伴一起讨论了一下，决定一起仿一个BiliBili的app（包括android端和iOS端），我们并没有打算把这个项目完全做完，毕竟我们的重点是掌握一些新框架的使用，并在实战过程中发现并弥补自身的不足。       本系列将记录我（android端）在开发过程中的一些我觉得有必要记录的功能实现而已，并不是完整的从0到1的完整教程，若个别看官大爷觉得不好请出门左拐谢谢。以
Java毕业设计基于SSM框架+MySQL的高仿B站弹幕视频网站项目源码+数据库.zip
03-12
Java毕业设计基于SSM框架+MySQL的高仿B站弹幕视频网站项目源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、...
springCloudalibaba高并发仿斗鱼平台实战
07-13
### Spring Cloud Alibaba 高并发仿斗鱼平台实战 #### 一、项目背景与目标 在当前互联网技术高速发展的背景下，视频直播平台如斗鱼等因其丰富的互动性和娱乐性而受到广大用户的喜爱。为了应对海量用户访问带来的高...
仿bilibili的APP 界面UI
10-01
视频播放功能直播功能弹幕功能换肤功能… 本系列文章，将会有记录以上功能的实现但不仅仅只有这些，还会有一些其他，比如自定义控件、利用fiddler抓包等，接下来就进入本篇的主题——《仿bilibili刷新按钮的实现》。
仿哔哩哔哩ssm项目
12-04
9. **视频处理**：B站特色之一是弹幕功能，项目可能需要处理视频流和弹幕信息，这可能涉及到FFmpeg等工具进行视频处理。 通过这个仿B站项目，开发者不仅可以提升SSM框架的实际应用能力，还能深入了解Web开发的全貌...
小程序优秀项目源码汇总，每个项目都有图有源码，零基础学微信小程序，小程序表格，小程序视频，小程序视频弹幕，小程序仿天猫大转盘抽奖等源码，小程序云开发，小程序发邮件，小程序支付，微信支付
01-26
视频资源： 1，点餐小程序(java后台+小...005，小程序自学系列（优秀源码005）---小程序开发之视频播放器带弹幕Video 弹幕颜色自定义 6,7过段时间更新 008，小程序自学系列（零基础学小程序）----列表和轮播图的实现，
flex：1
最新发布
m0_47999208的博客
07-25 376
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
css实现线条中间高亮，左右两边模糊（linear-gradient的运用）
贵林之恋的博客
07-24 349
效果： CSS实现边框底部渐变色的方法:(最简单的一种) 参考文章：CSS实现边框底部渐变色的4种方法_css下边框渐变-CSDN博客
css 作业 2
没有 bug 的代码是不完美的！
07-25 702
写完了
视频 弹幕 网站开发
09-07
很高兴回答你关于视频弹幕网站开发的问题。要开发一个视频弹幕网站，你需要考虑以下几个方面： 1. 视频播放器：选择一个适合你网站需求的视频播放器，比如HTML5视频播放器或者第三方的播放器库，例如Video.js、Plyr...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值