video 移动端内联播放，视频上层可显示弹幕、点赞。video转canvas播放

 效果图：

HTML：

<video id="videoPlayer" src=" " webkit-playsinline playsinline x5-video-player-type='h5' poster=" "></video>

webkit-playsinline playsinline: 内联播放，在iOS Safari和一些安卓的一些浏览器下播放视频的时候，不能在h5页面中播放视频，系统会自动接管视频。 x5-video-player-type="h5" : 启用x5内核H5同层播放器

（踩坑记：一开始加了这个属性x5-playsinline：设置android在微信中内联播放视频，结果Android上播放视频一直会在最上层，出现默认的控制条，并且无法显示弹幕等其他元素。去掉之后就可以了）

测试后iOS，Android都可兼容。

也可将视频转为canvas播放：

//视频转canvas
    var canvas = document.getElementById('vodCanvas'),
        context = canvas.getContext('2d'),
        video = document.getElementById('videoPlayer');
    function animate(){
        if(!video.ended){
            context.drawImage(video,0,0,canvas.width,canvas.height);
            window.requestAnimationFrame(animate)
        }
    

//视频播放
    $(".play-box").click(function(){
        $("#videoPlayer").css("display", "none");  //开始播放后将video隐藏
        $(this).hide();
        video.play();
        window.requestAnimationFrame(animate);
    });