美文网首页
利用createjs框架绘制视频,且不调用任何播放组件

利用createjs框架绘制视频,且不调用任何播放组件

作者: 俊瑶先森 | 来源:发表于2017-12-20 21:42 被阅读512次

    一直以来,在微信中内嵌视频总是收到IOS及微信的双重限制,主要是必须被调用原生播放器,但是我希望在HTML的文档流中内嵌视频,而不调用原生组件,其方法是

    第一步:调用createjs框架

    <script src='/path/createjs-2015.11.26.min.js'></script>
    

    第二步:DOM部分:

    <canvas id="canvas" width="640" height="1008"></canvas>
     <video id="video" ></video>
    

    第三步;CSS部分:我使用的是全屏幕绘制,将视频元素隐藏

    canvas{
        position:absolute;
        width:100%;
        height:100%;
        top:0px;
        left:0px;
      }
      #video{
        display:none;
      }
    
    

    第四步:JS部分:

    以下是设置video元素的属性

    var video = document.getElementById('video');
    video.src = 'images/video.mp4';
    video.setAttribute('webkit-playsinline',true);  //IOS内连方式播放视频
    video.setAttribute('playsinline',true);//IOS微信浏览器内连方式播放视频
    video.setAttribute('x5-video-player-type','h5');//Android微信浏览器启用h5播放器
    

    以下开始绘制视频

    var stage = new createjs.Stage('canvas');  //设置舞台
    var bitmap = new createjs.Bitmap(video);  //载入视频
    stage.addChild(bitmap);
    createjs.Ticker.setFPS(25);  //设置帧率
    createjs.Ticker.on('tick',stage);  //刷新舞台
    

    演示地址

    DEMO

    相关文章

      网友评论

          本文标题:利用createjs框架绘制视频,且不调用任何播放组件

          本文链接:https://www.haomeiwen.com/subject/ngvnwxtx.html