html5 视频和 javascript 组合失败答案

【问题标题】：html5 video and javascript combination failshtml5 视频和 javascript 组合失败
【发布时间】：2013-08-06 12:08:43
【问题描述】：

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

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

请点击链接here

我正在我的本地机器上尝试以下相同的操作 -

<!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 有问题吗？预期：正向和反向功能都应该工作。实际：两个按钮都不起作用。

非常感谢任何帮助。提前致谢。

【问题讨论】：

标签： javascript jquery html html5-video

【解决方案1】：

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

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

【讨论】：

明白。问题的第二部分，跳回 0.1 分数，我确实看到倒带速度很快。这也发生在 chrome 浏览器上。我该如何控制呢？另外，有没有办法直接在加载时“反向播放”？