iPad上的HTML5视频
iPad上的HTML5视频
提问于 2010-05-26 05:38:48
我有一个动态的视频画廊，它在电脑上工作得很好。当移动到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();
});回答 7
Stack Overflow用户
发布于 2011-03-29 12:11:45
解决此视觉问题的方法是隐藏视频元素，直到它准备好播放为止。请注意，您不能设置display:none (如果您这样做，视频将不会加载)，visibility:hidden也不能解决这个问题。
要解决这个问题，可以使用overflow:hidden将视频元素包装在DIV上，并设置-webkit-transform:translateX(1024px) (这个数字足够大，可以将视频推到屏幕之外)。
然后，您必须侦听canplay或canplaythrough或load事件(根据您的需要)，并在此之后将translateX设置为零。
Stack Overflow用户
发布于 2010-06-04 01:32:22
在iPad上，它不会加载视频，直到用户启动一个事件，这是苹果为防止iPhone或iPad用户烧掉他们的数据套餐而设计的。所以你不能做你想做的事，对不起。
请查看此link，并查找设备特定注意事项部分以获取一些信息。但它不会开始加载数据，所以在用户触摸canplaythrough事件之前，它不会触发该事件。
Stack Overflow用户
发布于 2010-05-27 15:41:11
在尝试加载视频之前，请检查浏览器是否可以播放视频：
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/, ''));
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2908724
复制相关文章
相似问题