采用canvas达成和HTML伍 video交互的弹幕效果

2019-05-15 03:34栏目:ca888圈内

Danmmu Player是基于jQuery的弹幕视频插件。当在看视频的时候,同时发表自己的观点,这样很好的提高用户互动效果。其实也就是在视频界面上做一个滚动展示动画效果,这样的聊天互动视频效果我们叫它弹幕。

一、canvas实现弹幕性能较好

ca888会员登录 1

在线实例

实例预览

从技术实现成本角度讲,要实现弹幕效果,最简单的方法就是DOM CSS3控制,如果我们的弹幕效果比较简单,使用CSS3动画实现也不失为一个好的方法。

HTML

使用方法

  1. <div id="danmup"></div>
  2. $("#danmup").DanmuPlayer({  
  3.     src: "abc.mp4", //视频源  
  4.     height: "480px", //区域的高度  
  5.     width: "800px", //区域的宽度  
  6.     urlToGetDanmu:"getData.php",  //从后端获取弹幕数据  
  7.     urlToPostDanmu:"sendData.php"  //发送弹幕数据给后端保存入库  
  8. });

复制

但是如果我们的弹幕数据量比较大,就像下面这种:

首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件,本文不重复写下,唯一不同的地方是需要在body中加一个div#tip,用来展示地图信息的提示框。

参数详解

参数 描述 默认值
text 弹幕文本内容 -
color 弹幕颜色 -
position 弹幕位置 0为滚动 1 为顶部 2为底部 -
size 弹幕文字大小。 0为小字 1为大字 -
time 弹幕所出现的时间。 单位为分秒(十分之一秒) -
isnew 当出现该属性时(属性值可为任意),会认为这是用户新发的弹幕,从而弹幕在显示的时候会有边框。 -

下载

 

ca888会员登录 2

复制代码 代码如下:

使用DOM来实现很容易卡成了80年代的拖拉机——一顿一顿的。

<div id="map"></div>
<div id="tip"></div>

很显然,面对这种多元素的复杂动画,使用canvas实现是更加合适的,动画会流畅很多。

jQuery

本文就将展示两个案例,使用canvas实现弹幕效果。其中一个效果是静态的弹幕数据固定的无限循环的效果,适合在个人博客或者运营页面,这种非视频场景使用;另外一个效果是动态的弹幕数据可变的和真实HTML5交互的弹幕效果,也就是真视频弹幕效果。

通过调用raphael绘制出中国地图,然后载入统计数据,由于地图区块小,我们不在地图载入的时候就将数据显示在地图区块上了,我们通过鼠标交互实现将数据信息更好的展示给用户。当鼠标滑向省份区块时,通过e.pageX和e.pageY定位鼠标坐标,然后通过jquery的css()方法定位提示框div#tip,并且将对应省份的的名称和活跃用户数加到提示框里并展现出来,请看代码:

两个高保真demo的源代码都是可以免费使用的,使用MIT许可,也就是需要保留源代码中的版权声明。

复制代码 代码如下:

好,下面我们一个人来看一下。

$(function(){
    $.get("json.php",function(json){

二、HTML5 canvas实现的静态循环滚动播放弹幕

    ......//这里省略代码若干

先看效果,您可以狠狠地点击这里:HTML5 canvas实现的静态循环弹幕demo

    var i=0;
    for (var state in china) {
        china[state]['path'].color = Raphael.getColor(0.9);
        (function (st, state) {
            var prodata = data[i];
            var fillcolor = colors[arr[i]];
            st.attr({fill:fillcolor});//填充背景色
            xOffset = 70;
            yOffset = 180;
            st.hover(function(e){//鼠标滑向
                st.animate({fill: "#fdd", stroke: "#eee"}, 500);
                R.safari();                
                $("#tip").css({"top":(e.pageY-xOffset) "px","left":(e.pageX-yOffset) "px"}).fadeIn("fast")
                .html("<h4>" china[state]['name'] "</h4><p>活跃用户数:" prodata "</p>");
            },function(){//鼠标离开
                st.animate({fill: fillcolor, stroke: "#eee"}, 500);
                R.safari();
                $("#tip").hide();
            });

效果截图如下:

            st.mousemove(function(e){//鼠标移动
                $("#tip").css({"top":(e.pageY-xOffset) "px","left":(e.pageX-yOffset) "px"});
                R.safari();
            });

ca888会员登录 3

         })(china[state]['path'], state);
         i ;
    }
    });
});

相关JS代码直接查看页面源代码就可以看到了。

以上代码可以看出,通过jQuery的hover()鼠标滑向省份区块时,调用弹出提示框,并将数据载入显示在提示框中,而值得关注的是,我们还需要加一个效果,就是鼠标在省份区块上移动mousemove()的时候,也应该调用提示框跟随鼠标一起移动,否则的话当鼠标在一个省份区块内滑动的话提示框位置不会变化,这样会影响体验效果,小小的改动可以提升用户体验。
最后,如果您需要定制提示框的效果的话,可以设置提示框的CSS样式,本例简单的CSS代码如下:

使用方法和API

复制代码 代码如下:

语法如下:

#tip{position:absolute; width:180px; border:1px solid #d3d3d3; background:#fff;display:none;
-moz-border-radius:5px; -webkit-border-radius:5px; overflow:hidden; border-radius:5px;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); 
box-shadow:1px 1px 2px rgba(0,0,0,.2);}
#tip h4{height:28px; line-height:28px; padding-left:6px; background:#f0f0f0}
#tip p{line-height:24px; padding:2px 4px}

canvasBarrage(canvas, data);

您可能感兴趣的文章:

  • php版微信数据统计接口用法示例
  • PHP Mysql jQuery中国地图区域数据统计实例讲解
  • 通过php快速统计某个数据库中每张表的数据量
  • php流量统计功能的实现代码
  • php统计文件大小,以GB、MB、KB、B输出
  • php实现用户在线时间统计详解
  • 也谈php网站在线人数统计
  • php中3种方法统计字符串中每种字符的个数并排序
  • 发款php蜘蛛统计插件只要有mysql就可用
  • php memcache实现的网站在线人数统计代码
  • PHP实现的统计数据功能详解

其中:

canvas

canvas表示我们的画布元素,可以直接是DOM元素,也可以是画布元素的选择器。

data

data表示弹幕数据,是一个数组。例如下面:

[{

ca888会员登录,value: '弹幕1',

color: 'blue',

range: [0, 0.5]

}, {

value: '弹幕2',

color: 'red',

range: [0.5, 1]

}]

可以看到数组中的每一个值表示一个弹幕的信息对象。其中value表示弹幕的文字内容;color表示弹幕描边的颜色(弹幕文字本身默认是白色);range表示弹幕在画布中的区域范围,例如[0, 0.5]表示弹幕在画布中的上半区域显示,[0.5, 1]表示弹幕在画布中的下半区域显示。

然后就可以看到无限滚动的弹幕效果了。

补充说明:

此弹幕效果默认文字大小是28px,并且文字加粗,如果这个效果不符合您的需求,需要在canvasBarrage()方法中修改源代码。因为本来就是个简单静态效果,因此没有专门设计成API。

此弹幕效果默认是白色文字加可变颜色描边,同样的,如果这个效果不符合您的需求,需要在canvasBarrage()方法中修改源代码。

跟真实的弹幕效果有所不同,这里的弹幕出现的速度和时机不是基于特定时间,而是随机产生。所以看到有些文字好像开飞机,而有些文字好像坐着拖拉机。因为是死数据,这样设计会看上去更真实写。

三、canvas实现的和HTML5 video真实交互的弹幕

这个原型就有点厉害了,市面上估计很难找到这么负责任的原型页面了。实现的动机完全兴趣使然,上面实现了个简单的,就想着要不实现一个真实的,万一以后用得到呢?

先来看效果,您可以狠狠的点击这里:HTML5 canvas和mp4视频真实交互弹幕demo

版权声明:本文由ca888发布于ca888圈内,转载请注明出处:采用canvas达成和HTML伍 video交互的弹幕效果