HTML5实现视频弹幕功能_F11 - 专业站长和开发者的学习网站

分享到

HTML5实现视频弹幕功能

html5 来源：互联网搜集作者：秩名发布时间：2019-08-10 16:46:28 人浏览

摘要

本篇文章介绍HTML5实现视频弹幕功能 1.首先展示一下弹幕视频弹幕原图，事实说话 2.代码展示 1html代码展示 div class=barrage video id=myvideo autoplay loop width=100% height=300px source src=video/1.mp4 /video div class=screen div class=content !

本篇文章介绍HTML5实现视频弹幕功能

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

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>

您可能感兴趣的文章 :

原文链接 : https://www.jb51.net/html5/687400.html

Tag : html5(144)

HTML5页面打开微信小程序功能实现

微信终于支持由页面跳转至小程序啦 ~ 步骤一：绑定域名登录微信公众平台进入公众号设置的功能设置里填写JS接口安全域名。步骤二：引
html5+实现plus.io进行拍照和图片等获取

使用Hbuilder开发工具开发：实现可对Android机进行控制和获取资源说明：IO模块管理本地文件系统，用于对文件系统的目录浏览、文件的读取
HTML标签实现带动画的抖音LOGO效果

先上结果，最终实现效果如下：还原度应该还可以吧？抖音Logo结构想要用CSS来画抖音的Logo，前提要先了解它的构造，一定是一些几何图形
video.js支持m3u8格式直播的实现教程

为什么要使用video.js？ 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一，直接写原生
html5调用摄像头截图功能的介绍

关于html5调用音视频等多媒体硬件的API已经很成熟，不过一直找不到机会把这些硬件转化为实际的应用场景，不过近年来随着iot和AI的浪潮，
前端监听websocket消息并实时弹出的代码实例介绍

本文默认您已掌握react生态开发的相关技术，并熟练应用umiJS的原则上，请继续！项目需求： 1、服务侧推送给消息给前端，前端需要展示在
HTML5新增内容和API介绍

classList 属性该属性用于在元素中添加，移除及切换 CSS 类。 classList属性返回元素的类名，作为 DOMTokenList 对象： div id=div class=test1 test2clas
使用canvas仿Echarts实现金字塔图的教程

最近公司项目都偏向于数字化大屏展示????，而这次发给我的项目原型中出现了一个金字塔图?????，好巧不巧，由于我们的图表都是使用Ech
基于HTML十秒做出淘宝页面的方法

十秒钟做出一个网页，可能大家看完会觉得有点标题党，其实不然，把别人的抠过来还是可以的比如我这次先把淘宝的网页扣过来为例第一
HTML5+CSS+JavaScript实现捉虫小游戏的代码

捉虫小游戏首页展示：选择昆虫：效果展示：有密集恐惧症的别玩哟、游戏永远不会停止一直玩项目源码结构：图片和js以及css等基础