微信H5专属 – Canvas Video 视频播放器 (更新)

2017-08-09 更新: 我们近期在 TCI 斗品膳集团的官网网站设计上使用了 Canvas 视频的技术、再通过自己的修改作出了全屏 Canvas 视频自动播放。通过手机观看 TCI 的官网可以看到我们如何利用该技术。 TCI 斗品膳官方网站 *Canvas 视频播放可以完美的播放在微信或 IOS Safari 里面,但是在一般的 PC 端有点问题,所以我们只有在手机端才使用 Canvas 的技术,请切记。 -- 最近作了一系列的微信 H5网页探索发现目前的设计趋势走向 360, VR, 全屏视频, 互动. 各大品牌都推出了响当当的作品. 然后才发现这些复杂的特效都是用 Canvas 所开发出来的. Canvas 不简单, 我多次想学习但因为基于 Javascript 不够强 (多半学 JQuery), 所以没有太多 Canvas 的作品. 这是在搜索的时候找到的其他人案例作品: Mercedes-Benz (VR, 视频, 互动): http://special.mercedes-benz.com.cn/thenewe-classlaunch/mobile/index.html Haier - 书的 H5互动广告 (视频, 互动): http://cdn.im-ad.com/2016/HaierBook/?from=singlemessage&isappinstalled=0 在最近的项目中, 因为首页需要用到视频作背景, 所以搜索了方法让手机版网页也可以实现到背景自动播放视频. 大家都知道, iPhone 的 IOS Safari, 或是 微信, 都因为限制而无法用 <video> 自动播放视频, 需要手动点击播放按钮, 全屏观看. 在搜索的过程中, 找到了2个对应的 javascript 插件:

Canvid

Canvid 的使用原理不一样. Canvid 需要将视频转换成一张一张的图片, 然后组合成一个大图. 这只能支持小视频, 因为 iPhone Safari 会限制单一图片的传输大小. 转换的过程非常麻烦, 需要用到服务器上的插件: ffmpeg 跟 imagemagick. 经过一番了解之后, 决定不采用这个插件, 因为客户无法自行转换, 未来会很难更新视频. 但还是分享 Github网站给大家: https://github.com/gka/canvid

Canvas Video Player

Canvas Video Player 是另一个 Github 找到的插件, 他是纯粹使用 <canvas> 和 <video> 来播放的. 我用电脑的浏览器播放视频, 非常卡, 但是手机上播放却非常的顺畅. 所以我只有在手机上使用该插件. https://github.com/Stanko/html-canvas-video-player  
本文由 Felicoz https://felicoz.com/ 原创发布,转载请保留地址!
canvas H5 ios iphone javascript safari video weixin 微信 视频