美文网首页
利用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