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

发表于 更新于 阅读次数： 阅读次数：

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

第一步：调用createjs框架

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

第二步：DOM部分：

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

第三步；CSS部分：我使用的是全屏幕绘制，将视频元素隐藏

1
2
3
4
5
6
7
8
9
10
11
canvas{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
  }
  #video{
    display:none;
  }

第四步：JS部分：

以下是设置video元素的属性

1
2
3
4
5
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播放器

以下开始绘制视频

1
2
3
4
5
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