0

我正在开发 HTML5 视频功能，我在SO中有一个问题，询问要遵循的方法。

在 w3.org 网站上找到了一些半帮助的文章，但在 jsfiddle.net 上找到了一个完全有效的示例

请点击此处的链接

我在我的本地机器上尝试如下相同 -

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e) {
var video = document.getElementById('video').play();
var intervalRewind;
$(video).on('play', function () {
    video.playbackRate = 1.0;
    clearInterval(intervalRewind);
});
$(video).on('pause', function () {
    video.playbackRate = 1.0;
    clearInterval(intervalRewind);
});
$("#speed").click(function () { // button function for 3x fast speed forward
    video.playbackRate = 3.0;
});
$("#negative").click(function () { // button function for rewind   
    intervalRewind = setInterval(function () {
        video.playbackRate = 1.0;
        if (video.currentTime == 0) {
            clearInterval(intervalRewind);
            video.pause();
        } else {
            video.currentTime += -.1;
        }
    }, 30);
});    
});
</script>
</head> 
<body> 

<div data-role="page" id="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">   
        <video id="video" controls>
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
        <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
            <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</video>
<button id="speed">Fast Forward</button>
<button id="negative">Rewind</button>   
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

</body>
</html>

我无法找出该脚本失败的原因和位置。jquerymobile 有问题吗？预期：正向和反向功能都应该工作。实际：两个按钮都不起作用。

很感谢任何形式的帮助。提前致谢。

4

1 回答 1

1

您的脚本工作（或多或少），使其工作所需要的只是注释掉设置播放事件的播放速率。单击快进后，它会干扰设置播放速率。这里的工作示例http://jsfiddle.net/h9EVQ/32/

至于脚本本身，您应该意识到，您的倒带实现存在一些缺陷。其中之一是视频实际上一直暂停，因此用户不能只按暂停来停止倒带。但这很容易解决。另一个更大的问题是，在进行倒带时，你会一点一点地回到过去.1。对于某些设置/电影来说，这可能是也可能不是问题。对于那些较短的电影，您的倒带功能可能会很快。

于 2013-08-06T12:59:31.437 回答