HTML5实现视频弹幕功能

前端  /  管理员 发布于 6年前   378

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>

总结

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