在iPad上播放HTML5video并寻找

非常奇怪的错误，我似乎无法弄清楚。

我试图让用户点击播放时从某个位置播放HTML5video。 当video开始播放时，我试图让它find正确的。

在我的玩事件我做this.currentTime = X

在浏览器上，它工作正常。 但是在iPad上，当我播放video时，video并没有find正确的位置（从零开始）。

更奇怪的是，如果我在setTimeout中做this.currentTime = X调用，比如说1秒，它就可以在IPad上工作（有时候）。

Answer 1

在iOS上，video会在播放时加载（请参阅项目＃2），而不是在网页加载时加载。 我的猜测是，当你运行this.currentTime = X ，video不会被加载，所以它不起作用。 这也解释了为什么拖延操作有时可以解决这个问题：有时它会在一秒钟后加载，有时不会。

我没有一个iOS设备来testing，但我build议绑定一个loadeddata监听器的video，以便您的currentTime操作只发生在video开始加载后：

 // within the play event handler... if(!isIOSDevice) { this.currentTime = X; } else { function trackTo(evt) { evt.target.currentTime = X; evt.target.removeEventListener("loadeddata", trackTo) }); this.addEventListener("loadeddata", trackTo); } 

根据当前访问是否来自iOS设备，您需要在代码的其他地方设置isIOSDevice 。

Answer 2

虽然这个问题相当古老，但问题仍然存在。 我发现了一个适用于iOS 5和iOS 6（iOS3 + 4未testing）的多个testingiPad（1 + 2 + 3）的解决scheme：

基本上你首先必须等待最初的playing事件，然后添加一个一次性的活页canplaythrough ，然后progress – 只有这样你才能真正改变currentTime值。 之前的任何尝试都将失败！

video必须首先开始播放，这使得在video元素顶部的黑色层更方便。 不幸的是，video内的声音无法通过JavaScript停用 – >不是完美的用户体验

 // https://github.com/JoernBerkefeld/iOSvideoSeekOnLoad / MIT License // requires jQuery 1.8+ // seekToInitially (float) : video-time in seconds function loadingSeek(seekToInitially, callback) { if("undefined"==typeof callback) { callback = function() {}; } var video = $("video"), video0 = video[0], isiOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/) !== null, test; if(isiOS) { // get the iOS Version test =navigator.userAgent.match("OS ([0-9]{1})_([0-9]{1})"); // you could add a loading spinner and a black layer onPlay HERE to hide the video as it starts at 0:00 before seeking // don't add it before or ppl will not click on the play button, thinking the player still needs to load } video.one("playing",function() { if(seekToInitially > 0) { //log("seekToInitially: "+seekToInitially); if(isiOS) { // iOS devices fire an error if currentTime is set before the video started playing // this will only set the time on the first timeupdate after canplaythrough... everything else fails video.one("canplaythrough",function() { video.one("progress",function() { video0.currentTime = seekToInitially; video.one("seeked",function() { // hide the loading spinner and the black layer HERE if you added one before // optionally execute a callback function once seeking is done callback(); }); }); }); } else { // seek directly after play was executed for all other devices video0.currentTime = seekToInitially; // optionally execute a callback function once seeking is done callback(); } } else { // seek not necessary // optionally execute a callback function once seeking is done callback(); } }); } 

整个事情可以从我的GitHub回购下载

Answer 3

阿普勒斯是正确的。 一旦video开始播放，Quicktime播放器就会出现，直到第一个“进度”事件被触发，video才会被search到。 如果您在此之前试图寻找，您将得到一个无效的状态错误。 这是我的代码：

 cueVideo = function (video, pos) { try { video.currentTime = pos; // Mobile Safari's quicktime player will error if this doesn't work. } catch(error) { if (error.code === 11) { // Invalid State Error // once 'progress' happens, the video will be seekable. $(video).one('progress', cueVideo.bind(this, video, pos)); } } } 

Answer 4

尝试限制你的X到1小数

 X.toFixed(1); 

正如你所提到的，有时在1秒后有效。 在playing事件发生后，你是否试图设置位置？ 甚至可能是canplaythrough事件

看看这个页面的来源，看看可以使用的事件的整个列表（在JavaScript文件中）

Answer 5

欣赏以下答案的尝试。 不幸的是，如果当前时间> 0且<1，则不得不求助于在时间更新内部进行检查，如果是，则转到该video的该部分，并且移除侦听器以更新时间。