移动端video视频播放的问题案例总结

来源：动视网责编：小采时间：2020-11-27 15:27:45

移动端video视频播放的问题案例总结

移动端video视频播放的问题案例总结:下面给大家看几个案列，都是一些问题案列和总结，值得大家参考和研究，因为我用canvas绘制了video，发现效果和直接用video一样。因此还是用了原来video的方式<div class="commondw videoimg" id="videoimg&qu

推荐度：

点击下载本文 文档为doc格式

导读移动端video视频播放的问题案例总结:下面给大家看几个案列，都是一些问题案列和总结，值得大家参考和研究，因为我用canvas绘制了video，发现效果和直接用video一样。因此还是用了原来video的方式<div class="commondw videoimg" id="videoimg&qu

下面给大家看几个案列，都是一些问题案列和总结，值得大家参考和研究，因为我用canvas绘制了video，发现效果和直接用video一样。因此还是用了原来video的方式

<div class="commondw videoimg" id="videoimg"></div><video class="vido" id="vidoid" poster="images/photo/video.jpg">
 <source src="media/move.mp4" type="video/mp4"></video>$("#videoimg").on("click", function () {
 $(this).fadeOut(1000);
 $(".clicktips").hide();
 $("#vidoid").show();
 $("#vidoid")[0].play();
 $("#vidoid").bind('ended', function () {
 $("#vidoid").hide();
 $("#videoimg").show();
 })
});

但是浏览器中还是没有问题的，和canvas绘制一样！点击体验原生video版障眼法视频

失败案例二（canvas渲染video）

后来我想到用canvas渲染video，也就是通过canvas的drawImage方式,结合requestAnimationFrame动画，requestAnimationFrame动画我之前制作婚礼邀请函总结的时候也介绍过。

下面贴出代码

 function VideoToCanvas(videoElement,fn) {
 if (!videoElement) {
 return;
 }
 var fn=fn||"";
 var canvas = document.createElement('canvas');
 canvas.width = videoElement.offsetWidth;
 canvas.height = videoElement.offsetHeight;
 var ctx = canvas.getContext('2d');
 var newVideo = videoElement.cloneNode(false);
 var timer = null;
 var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
 window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
 var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
 function drawCanvas() {
 ctx.drawImage(newVideo, 0, 0, canvas.width, canvas.height);
 timer = requestAnimationFrame(drawCanvas);
 }
 function stopDrawing() {
 cancelAnimationFrame(timer);
 }
 function endedCallBack(){
 cancelAnimationFrame(timer);
 fn && fn()
 }
 newVideo.addEventListener('play', function () {
 drawCanvas();
 }, false);
 newVideo.addEventListener('pause', stopDrawing, false);
 newVideo.addEventListener('ended', endedCallBack, false);
 videoElement.parentNode.replaceChild(canvas, videoElement);
 this.play = function () {
 newVideo.play();
 };
 this.pause = function () {
 newVideo.pause();
 };
 this.playPause = function () {
 if (newVideo.paused) {
 this.play();
 } else {
 this.pause();
 }
 };
 this.change = function (src) {
 if (!src) {
 return;
 }
 newVideo.src = src;
 };
 this.drawFrame = drawCanvas;
 this.show = function () {
 canvas.style.display = "block";
 }
 this.hide = function () {
 canvas.style.display = "none";
 }
 }

封装了显示show()、隐藏hide()、播放play()、暂停pause()、更换地址change(）以及切换播放和暂停playPause（）；

使用方法如下：

var canvasvedio=new VideoToCanvas(document.getElementById("vidoid"),function(){
canvasvedio.hide();
$("#videoimg").show();});canvasvedio.play();

还有一个回调函数，就是在canvas播放完毕之后，可以传入回调函数！这个的测试地址请点击，但是在安卓的微信、和一些浏览器中还是会弹出新的窗口，很是郁闷！！

canvas绘制video的其他应用

canvas绘制video有很多其他的应用方式，例如我们可以制作视频播放同步模糊背景、视频截图、灰色视频等等。

具体有一篇文章，写的还不错，推荐大家看一下：http://html5doctor.com/video-canvas-magic/

但是这个只能做PC端了，移动端还是有问题的！！！！

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！