唯一解决此问题的方法是通过画布播放视频。
在视频元素旁边添加一个画布,隐藏视频元素。
我没有通用的示例脚本,但我正在使用类似于以下内容:
;(function(window){
var Animation = {
animateVideo: function () {
var self = this,
video = document.getElementById('video'),
canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
width = canvas.clientWidth,
height = canvas.clientHeight;
canvas.width = width;
canvas.height = height;
video.addEventListener('play', function() {
self.draw(this, context, width, height);
}, false);
video.play();
},
draw: function (video, context, width, height) {
var self = this;
if(video.paused || video.ended) return false;
context.drawImage(video,0,0,width,height);
setTimeout(function() {
self.draw(video, context, width, height);
}, 60);
}
}
window.Animation = Animation;
}(window));
在主脚本中,每当您需要并且准备好时,请调用:
Animation.animateVideo();
记住,这个例子是一个想法,并从特定的解决方案中删除了一些东西以便快速回答,但我希望它能给你一些线索。
问候!