HTML5实现视频弹幕功能


Posted in HTML / CSS onAugust 09, 2019

1.首先展示一下弹幕视频弹幕原图,事实说话

HTML5实现视频弹幕功能

2.代码展示

1>html代码展示
 

<div class="barrage">
        <video id="myvideo" autoplay loop width="100%" height="300px">
            <source src="video/1.mp4">
        </video>
        <div class="screen">
            <div class="content">
                <!--内容在这里显示-->
            </div>
        </div>
        <!--发送对话框-->
        <div class="send">
            <input type="text" class="s_text" placeholder="使用回车可以快速发送弹幕"/>
            <input type="button" class="s_btn" value="发送" />
             <!--关闭弹幕功能-->
            <span class="barrage_close">关闭弹幕</span>
            <!-- 静音功能  -->
            <span id="muted">开启静音</span>
        </div>
  </div>

2>css代码展示

*{
    padding: 0;
    margin: 0;
}
input{
    outline: none;
}
.barrage {
    position: relative;
    width: 100%;
    height:250px;
}
#myvideo{
    position: absolute;
    /* width: 100%;
    height:300px; */
    top: -50px;
    left: 0;
    z-index: -1;
}
.barrage .screen {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 300px;
}
.barrage .screen .content {
    position: relative;
    width: 100%;
    height: 250px;
    background: #000;
    opacity:0.5;
    /* filter: alpha(opacity=100); *//***针对ie8以上或者更早的浏览器****/
    background-color: transparent;
    z-index: 1;
}
.barrage .screen .content div {
    position: absolute;
    font-size: 20px;
    font-weight: bold;
    white-space: nowrap;
    line-height: 40px;
    z-index: 40;
}
.barrage .send {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 55px;
    line-height: 55px;
    z-index: 1;
    /*background: #000;*/
    background: rgba(0,0,0,0.5);
    text-align: center;
    /*display: none;*/
}
.barrage:hover .send{
    display: block;
}
.barrage .send .s_text {
    width: 60%;
    height: 35px;
    line-height:35px;
    font-size: 16px;
    font-family: "微软雅黑";
    border-radius:20px;
    opacity: 0.8;
}
.barrage .send .s_btn {
    width: 105px;
    height: 35px;
    line-height: 35px;
    background: #22B14C;
    color: #fff;
    border-radius: 10px;
    opacity: 0.8;
}
.barrage_close,#muted {
    width: 80px;
    height: 30px;
    line-height: 30px;
    border-radius: 10px;
    text-align: center;
    color: #22B14C;
    background:#fff;
    cursor: pointer;
    opacity: 0.8;
}
#muted{
    background:yellow;
}
.barrage_close1{
    color: #fff;
    background: #fff;
}
/* css动画 */
.content div{
    animation:Text 15s infinite normal;
}
@keyframes Text{
    0%{
        left:100%;
    }
    20%{
        left:75%;
    }
    80%{
        left:0%;
    }
    100%{
        left:-30%;
    }
}

3>js代码展示
 

 

$(function () {
     $(".barrage_close").click(function(){
         $(".content div").remove();
     });
    init_barrage();
});
//将弹幕内容放进数组贮存起来
var arr=[];
var h=arr.push();
// 监听发送,按enter发送
document.οnkeydοwn=function(event){
    var e = event || window.event;
    if(e && e.keyCode==13){ 
    //    console.log(11111);
        $(".send .s_btn").click();
    }                
};
//提交评论
$(".send .s_btn").click(function () {
    var text = $(".s_text").val();
    if (text == "") {
        alert('你的内容为空,请填写评论在再发送');
        return false;
    }
    var _lable = $("<div style='right:20px;top:0px;opacity:1;color:" + getColor() + ";'class='content_text'>" + text + "</div>");
    $(".content").append(_lable.show());
    init_barrage();
    $(".s_text").val("");
});
//初始化弹幕技术
function init_barrage() {
    var _top = 0;
    $(".content div").show().each(function () {
        var _left =$(".barrage").width();//浏器览最大宽度(也是浏览器的高度),作为定位left的值
        console.log(_left);
        var _height =$(".barrage").height();//视频窗口的最大高度
        console.log(_height);
        _top += 35;
        if (_top >= (_height - 150)) {
            _top = 0;
        }
        $(this).css({ left: _left, top: _top, color: getColor() });
        //定时弹出文字
        // var time = 10000;
        // if ($(this).index() % 2 == 0) {
        //     time = 15000;
        // }
        // $(this).animate({ left: "-" + _left + "px" }, time, function () {
        //     $(this).remove();
        // });
    });
}
//获取随机颜色
function getColor() {
    return '#' + (function (h) {
        return new Array(7 - h.length).join("0") + h
    })
    ((Math.random() * 0x1000000 << 0).toString(16))
}
var video=document.getElementById("myvideo");
var mute=document.getElementById("muted");
console.log(muted);
//设置视频播放速度
// video.playbackRate = 0.5;
//视频静音
video.muted = false;
mute.οnclick=function(){
    if(video.muted){
                video.muted = false;   
                mute.innerText='';
                mute.innerText = '开启静音';
                // console.log(1111)
            }else{
                video.muted = true;   
                mute.innerText='';
                mute.innerText = '关闭静音';
                // console.log(2222)
            }
}

3.代码效果演示

<a title="查看演示效果" href="https://leader755.github.io/Video-barrage/" target="_blank" >点我查看演示效果</a>

<a title="下载源码" href="https://github.com/Leader755/Video-barrage.git" target="_blank">点我下载源码</a>

4.最重要的一点别忘了

问题:视频宽度不能100%,高度我定死了300px,有哪位大神帮吗解决一下吧。以下为涉及的主要代码,可以上翻查看详细代码。

<div class="barrage">
            <video id="myvideo" autoplay loop width="100%" height="300px">
                <source src="video/1.mp4">
            </video>
</div>
<style>   
.barrage {
    position: relative;
    width: 100%;
    height:250px;
}
#myvideo{
    position: absolute;
    /* width: 100%;
    height:300px; */
    top: -50px;
    left: 0;
    z-index: -1;
}
</style>

总结

以上所述是小编给大家介绍的HTML5实现视频弹幕功能 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
CSS3 选择器 属性选择器介绍
Jan 21 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 #HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 #HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 #HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 #HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 #HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 #HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 #HTML / CSS
You might like
Apache设置虚拟WEB
2006/10/09 PHP
php中通过smtp发邮件的类,测试通过
2007/01/22 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
详解Python中where()函数的用法
2018/03/27 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
幼儿园大班评语大全
2014/04/17 职场文书
文化产业实施方案
2014/06/07 职场文书
个人安全生产责任书
2014/07/28 职场文书
移交协议书
2014/08/19 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python