我正在开发一项功能，在我的屏幕加载时，视频应该开始反向播放。 (从最后一帧到第一帧)。 它实际上可以在屏幕加载时甚至在单击按钮时出现。
此刻，我已经实现了直到(在 StackOverflow 的帮助和支持下)播放我的视频 - 并在一段时间后反向播放。这是我使用的代码-
<!DOCTYPE HTML>
<html>
<head>
<style>
video{
height: 200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
var video = document.getElementById('video');
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 = 8.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>
<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>
</body>
</html>
现在，我想知道是否有机会直接反向播放我的视频，即在向前方向没有任何持续时间的情况下，视频应该开始反向播放。
最佳答案
你需要等到视频加载完毕，然后你可以通过 video.duration 获取它的长度，然后你可以将视频当前时间设置为此值(跳转到视频末尾)；
然后您可以使用负函数从最后一帧开始播放视频。
video.addEventListener('loadeddata', function() {
video.currentTime = video.duration;
$('#negative').click();
}, false);
在 http://jsfiddle.net/UkMV2/5/ 上也有关于视频播放的不错的 fiddle 。从 play a video in reverse using HTML5 video element 中找到
以下示例是对您的版本稍作修改，它实现了页面和视频加载事件的“反向”播放。
<!DOCTYPE HTML>
<html>
<head>
<style>
video{
height: 200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<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>
<script>
$(function() {
var video = document.getElementById('video');
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 = 8.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);
});
video.addEventListener('loadeddata', function() {
video.currentTime = video.duration;
$('#negative').click();
}, false);
});
</script>
</body>
</html>
关于javascript - 在屏幕加载时反向播放 html5 视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18118544/