iPad上的HTML5视频 [英] HTML5 video on iPad

问题描述

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

I have a dynamic video gallery and it works great on a computer. When moving to an iPad, the video starts loading and it shows the cannot play icon. Instead of this I'd rather the video not show until it's ready to play. I have tried to add events listeners for "canplaythrough" and "canplay" and when they occur for the video to fade in then play. Does the iPad not support these events?

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();
});

推荐答案

解决这个视觉问题的方法是隐藏视频元素，直到准备好播放。请注意，您无法设置 display：none （如果您这样做，视频将无法加载）， visibility：hidden won解决这个问题。

The way to solve this visual problem is to hide the video element until it is ready to be played. Note that you cannot set display:none (video won't load if you do that) and visibility:hidden won't solve the issue either.

为了解决这个问题，将视频元素封装在一个DIV上，使用 overflow：hidden 并设置 -webkit-transform：translateX（1024px）（一个足以将视频推到屏幕外的数字）。

To fix it, wrap the video element on a DIV with overflow:hidden and set -webkit-transform:translateX(1024px) (a number high enough to push the video outside the screen).

比你必须要听 canplay 或 canplaythrough 或加载 events（基于你的需要），然后将 translateX 设置为零。

Than you have to listen for the canplay or canplaythrough or load events (based on your need) and set the translateX to zero after that.

这篇关于iPad上的HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！