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);
    });