一直以来,在微信中内嵌视频总是收到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); //刷新舞台
演示地址
网友评论