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

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

第一步:调用createjs框架


第二步:DOM部分:


 

第三步;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框架绘制视频,且不调用任何播放组件)