JavaScript css3模拟简单的视频弹幕功能

最新推荐文章于 2023-05-29 08:50:51 发布

ccessl

最新推荐文章于 2023-05-29 08:50:51 发布

阅读量2.5k

点赞数 2

分类专栏： JavaScript CSS

本文链接：https://blog.csdn.net/cc_fys/article/details/78207742

版权

本文介绍如何使用JavaScript和CSS3创建一个简单的视频弹幕功能。通过监听视频播放状态，实时生成和显示弹幕，同时利用CSS3的transition属性实现弹幕平滑移动效果。用户可以输入并发送弹幕，弹幕会在视频上方以从右到左的方式滚动显示，并在一段时间后自动消失。

摘要由CSDN通过智能技术生成

最近相对比较空闲，想写一些东西写着玩。就尝试写了一个demo模拟了最简单的视频弹幕功能~~。

思路：

设置一个<div>和所播放的video的大小一致，把这个div标签蒙在video上面用于放置弹幕。在video的右边放一个<ul>列表用于显示弹幕列表。

屏幕上面的弹幕，把内容放在<span>标签里面，一般一行字都是从左边飞到右边，为了简单起见，这个移动就用了CSS3 的transition 属性。position设置为absolute,
那么就用的transition过度left属性，实现弹幕的移动。当然要注意设置其父元素的样式 overflow:hidden; 这样当字体飞出去的时候，就会隐藏飞出去的部分。

当点击发送的时候，获取input中的内容、当前日期、视频播放的进度video.currentTime，把这个内容作为一个对象存入一个数组中。把放置弹幕的span标签加入到div蒙版里，设置它的left，transition就会从当前left过度到下一个left，所以实现了移动。过渡完之后这个span标签就没用了，用removeChild把它中父元素中移除。同时把生成的<li>标签加入到ul中。

代码：

<!--Created by CC on 2017/10/11-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    .mainBody{
        margin: 10px auto;
        text-align: center;
        font-family: arial;
        position:relative;
    }
    .send{
       width:700px;
        margin:0px auto;
        text-align:left;
    }
     .my-msg{
         width:85%;
         height:35px;
     }
    .my-btn{
        background-color: #ccd0d7;