小程序系列(三)视频弹幕 - 技术分享 - 志盟培训
首页技术分享 小程序系列(三)视频弹幕

小程序系列(三)视频弹幕

更新时间:2017-05-12      作者:陈老师       阅读:1146

一、效果预览:

简单版本:

小程序系列(三)视频弹幕

初级版本:

小程序系列(三)视频弹幕

二、准备工具:

1)浏览器(不要太旧哦)

2)记事本(就是能写代码的就可以)


三、基本步骤:

1)简单版本

a)建立一个文本文件,保存文件名为index.html(重点仍旧是后缀)

b)写入下面代码

c)用浏览器打开index.html

2)初级版本

a)创建一个文本文件,命名index.html

b)创建一个文件夹,命名为css,用来放css文件

c)创建一个文件夹,命名为js,用来放js文件

d)将网页的元素设计放在HTML文件中,样式设计放在CSS文件中,相关的行为设计放在JS文件中。

e)具体源码就不放上来了就是细节的优化大致内容如截图。


四、源代码

1)简单版本:

html代码:

       <!DOCTYPE html>

       <html lang="en">

       <head>

                <meta charset="UTF-8">

                <title>基于div叠层实现的简单视频弹幕</title>

                <style type="text/css">

                        .new_arrage{

                                position: absolute;

                                top: 150px;

                                left: 200px;

                                color: red;

                                font-size: 18px;

                                font-weight: bold;

                                z-index: 20;

                        }

                </style>

      </head>

      <body>

              <div class="player" id="player">

                        <video src="videos/test.mp4" class="video"

                        width="800px" height="600px" controls>

                        </video>

              </div>

              <div>

                    输入内容:<input type="text" name="text" id="text_barrage">

                     <button onclick="sendArrage();">提交</button>

                     </div>


                     <script type="text/javascript">

                             function sendArrage(){

                                    var newDiv = document.createElement('div');

                                    newDiv.className = "new_arrage";

                                    newDiv.innerHTML = document.getElementById('text_barrage').value;

                                    document.getElementById("player").appendChild(newDiv);

                            }

                     </script>

              </body>

              </html>

解析:

HTML代码,CSS代码,JS代码全部放在一个文件,实现模拟简单的视频弹幕。

网页元素设计中只有两个模块,一个是播放器,放了一个video元素,一个是弹幕模块,输入弹幕内容和提交按钮。

样式设计中,对弹幕内容作了样式调整。

Js代码中,定义了一个点击触发函数,功能是点击提交按钮时,创建一个div块,增加到播放器模块中。

核心思想:发射弹幕时,创建一个新的弹幕块,加入到视频播放器模块中,其中弹幕块的层叠属性设置比视频播放器的大,因此实现了浮现在视频上面。

2)初级版本:

小程序系列(三)视频弹幕

小程序系列(三)视频弹幕

小程序系列(三)视频弹幕

解析:省略。


五、原理:

每发送一条弹幕,都创建一个新的弹幕快,然后添加到视频播放器所在模块,设置层叠属性,然后再根据不同的发送时间,将弹幕从不同时间显示在视频上方,再加上定时器控制弹幕快的移动。

在线报名

志盟科技上海招聘

在线报名 联系我们

志盟科技深圳招聘

在线报名 联系我们

志盟科技北京招聘

在线报名 联系我们
联系我们

咨询热线:

咨询 QQ:517578         

就业学员

  • 就业学员

    姓名:郭凡凡 
    院校:阜阳师范学院
    就职:佳戴
    职位:软件工程师
    月薪:10000

  • 就业学员

    姓名:陈祥龙 
    院校:中北大学
    就职:美囤妈妈
    职位:软件工程师
    月薪:9000

  • 就业学员

    姓名:陈建伟
    院校:南昌航空大学
    就职:SONY
    职位:嵌入式工程师
    月薪:8000

×
×
  • *真实姓名
  • *联系手机
  • *上课地址
  •    QQ号码

温馨提示:请保持手机畅通,咨询老师将为您提供专属的一对一报名服务。

×
  • *真实姓名
  • *联系手机
  • *联系邮箱
  • * QQ号码

温馨提示:请保持手机畅通,咨询老师将为您提供专属的一对一的服务。

本站由 宽敬科技——创新企业的建站运营顾问 提供支持