Use canvas to achieve barrage effects in videos

(function () {

    window.onload=function () {

        var video = document.getElementsByTagName("video")[0]

        var cav = document.getElementsByTagName("canvas")[0]

        //设置常量canvas的高度以及宽度

        var cavWidth = 800 

        var cavHeight = 420

        cav.width=cavWidth

        cav.height=cavHeight 

        var ctx = cav.getContext("2d")

        //存储弹幕对象的数组

        var capObjs = []

        var lastItemTime

        var capHeight = 20 

        var inputEle = document.getElementsByClassName("caption-input-text")[0]

        var sendEle = document.getElementsByClassName("caption-sendButton")[0]

        var colorUl = document.getElementsByClassName("colorItems")[0]

        var ismoveInputEle = document.getElementsByClassName("caption-input-ismove")[0]

        //弹幕颜色

        var colors=["#fff","#FFCCCC","#CCFFCC","#CCCCFF","#FFFFCC","#CCFFFF"]

        var selectedColorIndex = 0

        var prevPlayTime = 0

        //测试数据的数组

        var testArrayCopy = []

        var capobjId = 0

        //弹幕在画布中高度可能值组成的数组

        var topObjs = [{blank:true , value : 20 ,index:0},

                        {blank:true , value : 50 ,index:1},

                        {blank:true , value : 80 ,index:2},

                        {blank:true , value : 110 ,index:3},

                        {blank:true , value : 140 ,index:4},

                        {blank:true , value : 170 ,index:5},

                        {blank:true , value : 200 ,index:6},

                        {blank:true , value : 230 ,index:7},

                        {blank:true , value : 260 ,index:8},

                        {blank:true , value : 290 ,index:9},

                        {blank:true , value : 320 ,index:10},

                        {blank:true , value : 350 ,index:11},

                        {blank:true , value : 380 ,index:12},

                        {blank:true , value : 410 ,index:13}]

//test data 测试数据

var testArray = [{content:"ABCDEFGHIJKLMNOPQRSTUVWXYZ",time:"1",ismove:false,colorIndex:0},

{content:"233333333333333",time:"2",ismove:true,colorIndex:0},

{content:"干杯，哈哈哈~~~~~~",time:"2",ismove:true,colorIndex:5},

{content:"干杯，哈哈哈~~~~~~",time:"2",ismove:true,colorIndex:4},

{content:"干杯，哈哈哈~~~~~~",time:"2",ismove:true,colorIndex:4},

{content:"干杯，哈哈哈~~~~~~",time:"2",ismove:true,colorIndex:0},

{content:"干杯，哈哈哈~~~~~~",time:"2",ismove:true,colorIndex:0},

{content:"233333333333333",time:"3",ismove:true,colorIndex:0},

{content:"233333333333333",time:"3",ismove:true,colorIndex:0},

{content:"233333333333333",time:"3",ismove:true,colorIndex:0},

{content:"233333333333333",time:"3",ismove:true,colorIndex:0},

{content:"233333333333333",time:"3",ismove:true,colorIndex:0},

{content:"233333333333333",time:"3",ismove:true,colorIndex:0},

{content:"233333333333333",time:"4",ismove:false,colorIndex:0},

{content:"233333333333333",time:"5",ismove:true,colorIndex:4},

{content:"233333333333333",time:"6",ismove:true,colorIndex:2},

{content:"233333333333333",time:"7",ismove:true,colorIndex:2},

{content:"233333333333333",time:"7",ismove:true,colorIndex:2},

{content:"233333333333333",time:"7",ismove:true,colorIndex:2},

{content:"233333333333333",time:"7",ismove:true,colorIndex:2},

{content:"233333333333333",time:"7",ismove:true,colorIndex:2},

{content:"233333333333333",time:"7",ismove:true,colorIndex:2},

{content:"233333333333333",time:"8",ismove:true,colorIndex:0},

{content:"233333333333333",time:"9",ismove:true,colorIndex:0},

{content:"233333333333333",time:"10",ismove:true,colorIndex:0},

{content:"老师说的非常好，我要好好学习了》》》》",time:"12",ismove:true,colorIndex:0},

{content:"老师说的非常好，我要好好学习了》》》》",time:"13",ismove:true,colorIndex:0},

{content:"老师说的非常好，我要好好学习了》》》》",time:"14",ismove:true,colorIndex:2},

{content:"老师说的非常好，我要好好学习了》》》》",time:"15",ismove:false,colorIndex:0},

{content:"老师说的非常好，我要好好学习了》》》》",time:"16",ismove:true,colorIndex:2},

{content:"老师说的非常好，我要好好学习了》》》》",time:"17",ismove:true,colorIndex:3},

{content:"老师说的非常好，我要好好学习了》》》》",time:"18",ismove:true,colorIndex:2},

{content:"老师说的非常好，我要好好学习了》》》》",time:"19",ismove:true,colorIndex:0},

{content:"老师说的非常好，我要好好学习了》》》》",time:"20",ismove:true,colorIndex:3},

{content:"老师说的非常好，我要好好学习了》》》》",time:"21",ismove:true,colorIndex:0},

{content:"老师说的非常好，我要好好学习了》》》》",time:"22",ismove:true,colorIndex:0},

{content:"老铁们，小礼物走一波了，小汽车小火箭刷起来吧=========",time:"23",ismove:true,colorIndex:0},

{content:"老铁们，小礼物走一波了，小汽车小火箭刷起来吧=========",time:"24",ismove:true,colorIndex:0},

{content:"老铁们，小礼物走一波了，小汽车小火箭刷起来吧=========",time:"25",ismove:true,colorIndex:3},

{content:"老铁们，小礼物走一波了，小汽车小火箭刷起来吧=========",time:"26",ismove:true,colorIndex:0},

{content:"老铁们，小礼物走一波了，小汽车小火箭刷起来吧=========",time:"27",ismove:true,colorIndex:5},

{content:"老铁们，小礼物走一波了，小汽车小火箭刷起来吧=========",time:"28",ismove:false,colorIndex:5},

{content:"老铁们，小礼物走一波了，小汽车小火箭刷起来吧=========",time:"29",ismove:true,colorIndex:5},

{content:"老铁们，小礼物走一波了，小汽车小火箭刷起来吧=========",time:"30",ismove:true,colorIndex:5},

{content:"马上就下课了，瓦罗蓝大陆走起了～～～",time:"31",ismove:true,colorIndex:5},

{content:"马上就下课了，瓦罗蓝大陆走起了～～～",time:"32",ismove:true,colorIndex:2},

{content:"马上就下课了，瓦罗蓝大陆走起了～～～",time:"33",ismove:true,colorIndex:2},

{content:"马上就下课了，瓦罗蓝大陆走起了～～～",time:"33",ismove:true,colorIndex:5},

{content:"马上就下课了，瓦罗蓝大陆走起了～～～",time:"34",ismove:true,colorIndex:5},

{content:"马上就下课了，瓦罗蓝大陆走起了～～～",time:"35",ismove:true,colorIndex:5},

{content:"马上就下课了，瓦罗蓝大陆走起了～～～",time:"36",ismove:true,colorIndex:2},

{content:"马上就下课了，瓦罗蓝大陆走起了～～～",time:"37",ismove:true,colorIndex:2}]

        //将测试数据备份

        copyArray(testArray , testArrayCopy)

        /*弹幕对象的构造函数，参数分别是：1.ismove：弹幕是否是移动的弹幕,2.spe:弹幕的移动速度，3.col：弹幕的颜色，4.text：弹幕的文本*/

        /*原型链方法 setTopValue设置纵坐标，setLeftValue设置横坐标，moving完成坐标的改变，setId完成id值的设置*/

        function Caption( ismove , spe , col , text ) {

            this.isMove = ismove

            this.speed = spe

            this.color = col || "#ff0"

            this.content = text

            this.latestTime = 0 

            this.width = text.length * 20 

            this.id = 0

            this.topIndex = 0

            this.occupyPos = true 

            this.top = 300

            this.left = 0

            this.setLeftValue()

            this.setTopValue()

        }

        Caption.prototype.setTopValue = function  () {

            for(var i = 0 ,len = topObjs.length ; i < len ; i++){

                if (topObjs[i].blank) {

                    this.top = topObjs[i].value

                    this.topIndex = i

                    topObjs[i].blank = false

                    break

                }

            }

        }

        Caption.prototype.setLeftValue = function  () {

            if (this.isMove) {

                this.left = cavWidth

            }

            else {

                var contentLength = this.content.length

                var nowItemLeft = 420 - contentLength * 9

                this.left = nowItemLeft

            }

        }

        Caption.prototype.moving = function () {

            if (this.isMove) {

                this.left-=this.speed

                if ( this.left + this.width < cavWidth && this.occupyPos) {

                    this.occupyPos = false

                    topObjs[this.topIndex].blank = true

                }

            }

            else{

                this.latestTime += 1

                if (this.latestTime > 450) {

                    topObjs[this.topIndex].blank = true 

                }

            }

        }

        Caption.prototype.setId = function  () {

            this.id = capobjId

            capobjId++

        }

        var cap1 = new Caption(  false , 1 , 0 , "小礼物走一波，双击6666。。。。")

        capObjs.push(cap1)

        cap1.setId()

        //循环遍历数组，根据对象的属性绘制在画布上

        function drawAllText () {

            ctx.clearRect( 0 , 0 , cavWidth , cavHeight)

            ctx.beginPath()

            for(var i=0 , len = capObjs . length ; i < len ; i++ ){

                ctx.fillStyle = capObjs[i].color

                ctx.font = "bold 20px Courier New"

                ctx.fillText( capObjs[i].content , capObjs[i].left , capObjs[i].top )

                ctx.closePath()

                capObjs[i].moving()

                // if (capObjs[i].left < - cavWidth ) {

                    // capObjs.splice (i ,1)

                    // if excute this statement , will has fault because some item in array is null

                    // solution is : write a new function to refresh the array  

                // }

            }

        }

        //更新数组，当对象已经超出范围的时候从数组删除这个对象

        function refreshObjs(objs) {

            for (var i = objs.length - 1; i >= 0; i--) {

                if (objs[i].left < - cavWidth || objs[i].latestTime > 450 ) {

                    objs.splice(i , 1)

                }

            }

        }

        //更新保存弹幕对象的数组

        function updateArray () {

            var now = parseInt( video.currentTime )

            for (var i = testArray.length - 1; i >= 0; i--) {

                var nowItemTime = parseInt(testArray[i].time) 

                if ( nowItemTime == now ) {

                    //首次写的控制高度的方式，空间利用不充分，后来改为setTopValue中的方式

                    // var nowItemLeft = getLeftValue(testArray[i])

                    // var diffTime = Math.abs(nowItemTime - lastItemTime)

                    // if (diffTime < 6) {

                    //     capHeight += 30

                    //     capHeight = capHeight > 400 ? 20 : capHeight

                    // }    

                    var temcolor = colors[testArray[i].colorIndex]

                    var temcap = new Caption (  testArray[i].ismove , 1 , temcolor , testArray[i].content  )

                    capObjs.push(temcap)

                    capObjs[capObjs.length - 1].setId()

                    temcap = null

                    testArray.splice(i,1)

                }

            }

        }

        //当用户点击send发送弹幕的回调函数

        function sendCaption (argument) {

            var inputEleTxt = inputEle.value

            var now = parseInt( video.currentTime )

            var inputIsmoveValue = ismoveInputEle.checked

            var temObj = {content:inputEleTxt,time:now,ismove:inputIsmoveValue,colorIndex:selectedColorIndex}

            testArray.push(temObj)

            inputEle.value = ""

        }

        // function getLeftValue (obj) {

        //     if (obj.ismove) {

        //         return 0

        //     }

        //     else {

        //         var contentLength = obj.content.length

        //         var nowItemLeft = 420 - contentLength * 9

        //         return nowItemLeft

        //     }

        // }

        //重新启动canvas，用在人为导致进度条时间的改变

        function reinitCav (argument) {

            // testArray = testArrayCopy

            copyArray(testArrayCopy , testArray)

            capObjs = []

            capHeight = 0

            clearInterval(canvasTimer)

            canvasTimer = null

            initCanvas()

        }

        var canvasTimer = null 

        //初始化canvas，用在开始播放时

         function initCanvas () {

             if (canvasTimer == null ) {

                canvasTimer = setInterval(function (argument) {

                    drawAllText()

                    updateArray()

                    refreshObjs(capObjs)

                },10)

             }

        }//end function initCanvas

        //复制数组

        function copyArray (arr1 , arr2) {

            for (var i =0 , len=arr1.length ; i < len ; i++) {

                    arr2[i] = arr1[i]

                }   

        }

        //color select event 用户发送弹幕的颜色控制代码

        colorUl.addEventListener("click", function( e ){

            var prevSelectItemId = ""

            switch (selectedColorIndex) {

                case 0:

                    prevSelectItemId = "colorItemFrist"

                    break;

                case 1:

                    prevSelectItemId = "colorItemSecond"

                    break;

                case 2:

                    prevSelectItemId = "colorItemThrid"

                    break;

                case 3:

                    prevSelectItemId = "colorItemFourth"

                    break;

                case 4:

                    prevSelectItemId = "colorItemFifth"

                    break;

                case 5:

                    prevSelectItemId = "colorItemSixth"

                    break;

                default:

                    // statements_def

                    break;

            }

            var prevSelectItem = document.getElementById(prevSelectItemId)

            prevSelectItem.className = ""

            var eventTarget = e.target

            eventTarget.className = "selectedColor"

            var eveTarId = eventTarget.id.substring(9)

            switch (eveTarId) {

                case "Frist":

                    selectedColorIndex = 0

                    break;

                case "Second":

                    selectedColorIndex = 1

                    break;

                case "Thrid":

                    selectedColorIndex = 2

                    break;

                case "Fourth":

                    selectedColorIndex = 3

                    break;

                case "Fifth":

                    selectedColorIndex = 4

                    break;

                case "Sixth":

                    selectedColorIndex = 5

                    break;

                default:

                    // statements_def

                    break;

            }

        }, false)

        video.addEventListener("playing" , function () {

            initCanvas()

        })

        //进度条改变执行代码

        video.addEventListener("timeupdate", function  () {

            var nowPlayTime = video.currentTime

            var diffTime = Math.abs(nowPlayTime - prevPlayTime)

            prevPlayTime = nowPlayTime

            if (diffTime > 1) {

                reinitCav()

            }

        }, false)

        //视频暂停执行代码

        video.addEventListener("pause" , function () {

            clearInterval(canvasTimer)

            canvasTimer = null 

        })

        //点击send的监听事件

        sendEle.addEventListener("click" , sendCaption)

        //input的回车监听事件

        inputEle.addEventListener("keydown", function(e) {

            var keynum = 0

            keynum = window.event ? e.keyCode : e.which

            if (keynum == 13) {

                sendCaption()

            }

        })

        var aaaa = function() {

            alert(1)

        }

        aaaa()

        // function b(aaaa){

        //     return aaaa()

        // }

        // b()    

    }//end

})()