iPad上的HTML5视频

Question

我有一个动态的视频库,它在计算机上运行良好.移动到iPad时,视频开始加载,并显示无法播放的图标.而不是这个,我宁愿视频不显示,直到它准备好播放.我试图为"canplaythrough"和"canplay"添加事件监听器,当它们出现时,视频会淡入然后播放.iPad不支持这些活动吗？

new_video = document.createElement('video');
new_video.setAttribute('class', 'none');
new_video.setAttribute('width', '568');
new_video.setAttribute('height', '269');
new_video.setAttribute('id', 'video'+video_num);
current_video.insertBefore(new_video, video_controls);
new_video.load();
new_video.addEventListener('canplaythrough', function() {
     $('#video'+video_num').fadeIn(100);
     new_video.play();
});

Answer 1

解决这个视觉问题的方法是隐藏视频元素,直到它准备好播放.请注意,您无法设置display:none(如果您这样做,视频将无法加载),visibility:hidden也无法解决问题.

要修复它,请将视频元素包装在DIV上overflow:hidden并设置-webkit-transform:translateX(1024px)(数字足够高以将视频推到屏幕外).

比你要监听canplay或canplaythrough或load事件(根据您的需要),并设置translateX后为零.

Answer 2

在尝试加载视频之前检查浏览器是否可以播放视频：

function canPlayVorbis() {
    var v = document.createElement('video');
    return !!(v.canPlayType && v.canPlayType('video/ogg; codecs="theora, vorbis"').replace(/no/, ''));
}

function canPlayMP4() {
    var v = document.createElement('video');
    return !!(v.canPlayType && v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
}

function canPlayWebM() {
    var v = document.createElement('video');
    return !!(v.canPlayType && v.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''));
}

摘自《深入 HTML5》附录A。