html5 video视频弹幕

1.弹幕是接入的环信

环信文档:http://docs.easemob.com/im/400webimintegration/41chatroom

2.红色的参数是都要加上去，当时做的时候是参考了腾讯now的直播,但是会遇到 一个问题，直播的视频不能全屏显示 ，

会有黑框,当手机屏幕大的时候，左右就会有黑边，因为视频图没有盖满手机，解决方案就是将video放大，截取视频图.

http://stackoverflow.com/questions/4000818/scale-html5-video-and-break-aspect-ratio-to-fill-whole-site

 

var strhtml='<section id="video-container">' +
      '<div id="player-container"><video id="myVideo"  preload="auto" poster="'+urlimg+'" autoplay="true" ' +
      ' is="true" webkit-playsinline playsinline x5-video-player-type="h5" ' +
      ' x-webkit-airplay="disallow" airplay="disallow" x5­video­playerfullscreen="true" x5-video-orientation="portrait"' +
      'src="'+hlsurl+'"></video>' +
      '</div><div class="bg" data-lazyload="'+urlimg+'" ' +
      'style="background-image: url('+urlimg+'); display:block;">' +
      '</div><div class="img-loading hidden">' +
      '</div>' +
      '<div class="play-btn icon-play"></div>' +
      '</section>';
$("#video1").html(strhtml);

scaleToFill(document.getElementsByTagName("video")[0]);
//安卓机播放按钮点的时候播放
$(".play-btn").click(function(){
   $(".img-loading").show();
   $(".play-btn").hide();
   window.setTimeout(function(){
      document.getElementById("myVideo").play();
   },100)

   //$(".play-btn").hide();
})

 getVideoEvent();
 eventTester("play");    //play()和autoplay开始播放时触发
 eventTester("pause");    //pause()触发
 eventTester("ended");    //播放结束

function scaleToFill(videoTag) {
    var $video = $(videoTag),
        videoRatio = videoTag.videoWidth/ videoTag.videoHeight,
        tagRatio = $video.width()/ $video.height();
    //alert(videoRatio)
    if (videoRatio < tagRatio) {
        $video.css('-webkit-transform','scaleX(' + tagRatio / videoRatio  + ')')
    } else if (tagRatio < videoRatio) {
        $video.css('-webkit-transform','scaleY(' + videoRatio / tagRatio  + ')')
    }
}

function getVideoEvent() {
    var videoes = document.getElementsByTagName("video");
    for (var i = 0; i < videoes.length; i++) {
        showEventLog("video" + (i + 1), videoes[i]);
    }
}
    function showEventLog(videoNum,Media) {
        eventTester = function (e) {
            Media.addEventListener(e, function () {
                console.log(videoNum + ":" + e);

                //eventTester("loadstart");    //客户端开始请求数据
                //eventTester("progress");    //客户端正在请求数据
                //eventTester("suspend");    //延迟下载
                //eventTester("abort");    //客户端主动终止下载（不是因为错误引起），
                //eventTester("error");    //请求数据时遇到错误
                //eventTester("stalled");    //网速失速
                //eventTester("play");    //play()和autoplay开始播放时触发
                //eventTester("pause");    //pause()触发
                //eventTester("waiting");    //等待数据，并非错误
                //eventTester("playing");    //开始回放
                //eventTester("canplay");    //可以播放，但中途可能因为加载而暂停
                //eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕
                //eventTester("seeking");    //寻找中
                //eventTester("seeked");    //寻找完毕
                //eventTester("ended");    //播放结束

                if(e=="play")
                {
                    $(".bg,.play-btn,.loading,.img-loading").hide();
                }
                //else if(e=="error" || e=="pause")
                //{
                //    $(".bg,.play-btn,.loading,.pop4").show();
                //}
                else
                {
                    $(".bg,.play-btn").show();
                }
            });
        }
    }