【问题标题】:Is there a simple way to rewind a html video element with javascript/jquery? [duplicate]有没有一种简单的方法可以用 javascript/jquery 倒带 html 视频元素? [复制]
【发布时间】:2020-10-29 15:08:20
【问题描述】:

我有一个视频需要在网站上展示。我不能让用户快进,但他们需要能够倒带。 我在这里修改了示例:https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_prop_controller

到以下:

<!DOCTYPE html> 
<html> 
<body> 

<video id="myVideo" width="320" height="176" onclick="playOrPause();" oncontextmenu="return false;" controls >
  <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<div>
    
<input type="button" id="btnRewind" name="btnRewind" value="Rewind" onclick="rewindVideo();" />
<input type="button" id="btnPlay" name="btnPlay" value="Play" onclick="playVideo();" />
<input type="button" id="btnPause" name="btnPause" value="Pause" onclick="pauseVideo();" />
</div>

<script>
    var video = document.getElementById("myVideo");
    
    function playOrPause() {
        if (video.paused) {
            playVideo();
        } else {
            pauseVideo();
        }
    }
    
    function playVideo() {
        video.play();        
    }
    
    function pauseVideo() {
        video.pause();
    }
    
    function rewindVideo() {
        //video.currentTime -= 0.5;
        video.playBackRate = -2;
        video.play();
    }    

</script> 

<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>

有没有一种简单的方法可以从当前位置倒回视频?我想避免将整个库用于倒带功能。不过jQuery会很好。

【问题讨论】:

  • 如果“倒带”是指“向后跳几秒钟”,那么您的代码可以正常工作(如果您取消注释 video.currentTime -= 0.5;(我将其更改为 1/2 秒只是为了在添加视频时进行测试网址)
  • 如果“倒带”是指“反向播放”——那么可能性很小。
  • 是的,我的意思是反向播放。我相信你是对的。
  • 有可能,但并不容易。我在这里找到了一个工作示例:elstel.org/html5video/Html5VideoScripting.html.en

标签: javascript html jquery video rewind


【解决方案1】:

如何使用 JS 将“视频”元素倒带 2 秒

function Rewind() { 
var myVideo = document.getElementById("myVideo");
myVideo.currentTime = myVideo.currentTime -2; }

如何使用 JS 将“视频”元素快进 2 秒

function FastForward() { 
var myVideo = document.getElementById("myVideo");
myVideo.currentTime = myVideo.currentTime +2; }

【讨论】:

  • 感谢这个解决方案,它确实将视频向后(或向前)移动了几帧,但我希望得到一个更像是在 dvr 或 dvd 上倒带的解决方案。
猜你喜欢
  • 2012-04-30
  • 1970-01-01
  • 2022-12-07
  • 2011-02-17
  • 1970-01-01
  • 2021-05-28
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多