2011-08-24 181 views
10

我试图在iPad上反向播放HTML5视频(视频需要根据用户输入随意切换正向和反向)。在iOS上向后播放HTML5视频

HTML5 <video>元素包含一个名为playbackRate的属性,该属性允许以更快或更慢的速率播放视频,或反过来播放视频。根据Apple's documentation,此属性在iOS上不受支持。

通过设置currentTime属性每秒多次(例如每秒10-30次更新),可以在不使用playbackRate的情况下反向播放。这种方法适用于桌面Safari,但似乎iOS设备上的搜索限制为每秒1次更新 - 在我的情况下速度太慢。

有什么方法可以在iOS设备(即iPad)上向后播放HTML5视频吗?

(我测试在iPad 2运行4.3.1)

+3

你可能会在服务器上存储一个正常和颠倒的视频副本,并在它们之间切换? – Mihai

+0

我也试过。虽然转换速度比我预想的要快,但视频下降,出现quicktime徽标等等。我需要它是一个无缝切换。 –

+0

你解决了这个问题吗?详细视频的时间有多长,你可以将它切成一系列图像,并将其拖动到画布对象上而不是

回答

2

现在iOS 6 Safari支持playbackRate属性。

+0

我认为这是错误的,如在https://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/中提到的uid/TP40009523-CH5-DontLinkElementID_1 – joafeldmann

+0

你是对的,它在iOS 6的初始版本上工作,但随后他们在6.0.2或其他版本上禁用了它。 – kenwarner

3

作为米哈伊建议的,使用两个版本和更新当用户改变播放方向寻道位置。

将DIV中的视频层叠在一起,当翻转播放方向时,切换div可见性(并暂停播放被隐藏的视频)。

所以这是时间表:

  1. 用户点击播放切换。
  2. 暂停显示的视频。
  3. Get Seek显示视频的位置。
  4. 从视频持续时间中减去该值。
  5. 在未显示的视频中搜索此值。
  6. 切换显示的视频DIV。
  7. 开始播放新显示的视频。
+0

苹果公司表示,“iOS设备目前不支持”并行播放多个视频,部分重叠或完全覆盖。“ http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW10 –

+0

所以这会不适用于iOS设备。执行双视频选项的唯一方法是在切换到导致显着中断并显示Quicktime徽标的新视频时卸载现有视频。 –

+1

您也可以尝试将正向和反向视频合并到同一个文件中,当您向后播放时,只需移动到视频的后部并向前播放即可。 –

0

我的建议是在您的HTML代码中制作一个“假”视频播放器。然后捕捉用户使用safari/ios回调方法“播放”视频的尝试。然后创建一个MPMoviePlayerController实际加载视频并将其显示在浏览器中视频的原始位置或仅支持全屏播放。 MPMediaPlayback协议支持通过currentPlaybackRate属性进行反向播放,所以希望这应该是一个临时解决方案,因为我无法看到Safari版本的IOS,因为本地播放器支持,所以最终不会实现此功能。

2

为什么不把反向和前向版本拼接成一个电影?

这消除了当用户翻转方向时卸载和加载视频的问题。通过单一的电影方式,当用户翻转方向时,你所需要做的就是找出电影另一半中的对应点并寻找到那里。

0

注:我是愚蠢的,错过了问题的一个不平凡的一部分,所以,以下是针对iOS的目的

谷歌搜索了一会儿很没用,我发现下面的代码解释上沿如何支持HTML5视频的反向播放基于WebKit浏览器:

function speedup(video, direction) { 
    if (direction == undefined) direction = 1; // or -1 for reverse 
    if (video.playbackRate != undefined) { 
     video.playbackRate = direction == 1 ? 2 : -2; 
    } else { // do it manually 
     video.setAttribute('data-playbackRate', setInterval ((function playbackRate() { 
     video.currentTime += direction; 
     return playbackRate; // allows us to run the function once and setInterval 
     })(), 500)); 
    } 
} 

function playnormal(video) { 
    if (video.playbackRate != undefined) { 
     video.playbackRate = 1; 
    } else { // do it manually clearInterval(video.getAttribute('data-playbackRate’)); } 
} 

来源:http://net.tutsplus.com/tutorials/html-css-techniques/html5-audio-and-video-what-you-must-know/

您需要在HTML5视频对象传递给SPEE dup函数,但随后又是功能可能被还原成以下(我没有测试此然而,这是一个iPad特定功能):

function reverseVideo(video) { 
    video.playbackRate = -1; 
} 

随意玩耍,并寻找更多的信息,在html5视频元素上:)

+0

啊该死的,我很抱歉,我太累了..我会在几分钟内更新我的答案,完全错过了iOS部分不支持。 :( –