zoukankan      html  css  js  c++  java
  • video 移动端内联播放,视频上层可显示弹幕、点赞。video转canvas播放

     效果图:

    HTML:

    1 <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播放:
     1 //视频转canvas
     2     var canvas = document.getElementById('vodCanvas'),
     3         context = canvas.getContext('2d'),
     4         video = document.getElementById('videoPlayer');
     5     function animate(){
     6         if(!video.ended){
     7             context.drawImage(video,0,0,canvas.width,canvas.height);
     8             window.requestAnimationFrame(animate)
     9         }
    10     
    //视频播放
        $(".play-box").click(function(){
            $("#videoPlayer").css("display", "none");  //开始播放后将video隐藏
            $(this).hide();
            video.play();
            window.requestAnimationFrame(animate);
        });
     
  • 相关阅读:
    newCachedThreadPool无上限线程池使用
    newFixedThreadPool固定线程使用
    java定时器
    http文件上传/下载
    ThreadPoolExecutor线程池
    阻塞队列
    非阻塞队列
    IO文件夹拷贝(文件内含有文件和文件夹)
    MD5加密
    web.xml文件的作用
  • 原文地址:https://www.cnblogs.com/yehx/p/13489057.html
Copyright © 2011-2022 走看看