html5視頻和javascript組合失敗

我正在研究HTML5視頻功能，我在SO中詢問要遵循的方法。html5視頻和javascript組合失敗

上找到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是個問題嗎？預期：正向和反向功能均可使用。實際：這兩個按鈕都沒有工作。

任何幫助，非常感謝。在此先感謝。

來源

2013-08-06 Lohith Korupolu

你的腳本工作（或多或少），它使它的工作所需要的就是註釋設置播放事件的播放速率。這是干擾點擊快進後設置播放速度。這裏的工作示例http://jsfiddle.net/h9EVQ/32/

至於腳本本身，您應該認識到，您的倒帶實施有一些缺陷。其中之一是視頻實際上一直處於暫停狀態，因此用戶不能只按暫停停止倒帶。但這很容易解決。另一個更大的問題是，在做倒帶時，你跳回.1分數。這可能或可能不是某些設置/電影的問題。對於那些較短的電影，您的快退功能可能會很快。明白了。

來源

2013-08-06 12:59:31 WTK

瞭解。第二部分的問題，跳過0.1分，我確實看到倒帶很快。這也發生在Chrome瀏覽器上。我怎樣才能控制這個？另外，有沒有辦法在負載上直接「反向播放」？ –

html5視頻和javascript組合失敗

回答

相關問題