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);
        });
     
  • 相关阅读:
    Parameter 'xxx' not found. Available parameters are
    Windows下Redis开机自启动
    异常:找不到文件/无法解析
    远程连接MySQL数据库配置
    调用微信jssdk失败
    css+div 高度满屏
    常用JS正则表达式
    AVL树
    红黑树
    微信小程序实现自定义modal弹窗封装的方法
  • 原文地址:https://www.cnblogs.com/yehx/p/13489057.html
Copyright © 2011-2022 走看看