在滚动上播放视频

Play video on Scroll

本文关键字：视频 播放 滚动      更新时间：2023-09-26

我正在尝试在滚动时播放视频。无论如何，我实现了向前播放它，但是当我向后滚动时，视频不会向后播放，而是向前播放。

这是我的代码： 

//getting video element
var v = $("#v");
// calling function on scroll
$("#video-wrapper").on('mousewheel','#v',function(){
    var playVideoByScrollv = new PlayVideoByScrollv(v);
});
var PlayVideoByScrollv = function(video,e){
    var evt=window.event || e //equalize event object
    //delta returns +120 when wheel is scrolled up, -120 when scrolled down
    var delta = evt.detail ? evt.detail*(-120) : evt.wheelDelta 
    if(delta<=-120){
       video.currentTime += (1 / 24);
       video[0].play();
       setTimeout(function(){
           video[0].pause();
       },40);
    }
    else{
       video.currentTime -= (1 / 24);
       video[0].play();
       setTimeout(function(){
           video[0].pause();
       },40);
    }
    if (evt.preventDefault) //disable default wheel action of scrolling page
        evt.preventDefault()
    else
        return false
}

谁能告诉我哪里出错了？？

我不确定您要存档什么，我想象您想通过向上或向下滚动来控制视频。

我在Youtube上找到了一个视频，关于如何通过滚动构建视频控件。您可能感兴趣：https://www.youtube.com/watch?v=HiegEfkenXA

这是我完成的一个简单的代码片段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        body {
            padding:0px;
            margin:0px;
        }
        #v0 {
            display: inline-block;
            margin: 0 auto;
            position: sticky;
            position: -webkit-sticky;
            top:0px;
            width: 70%;
        }
    </style>
</head>
<body>
<div style="height:1600vh; text-align: center;">
    <video id="v0" tabindex="0", autobuffer preload>
        <source type='video/mp4; codecs=&quot;avc1.4D401E, mp4a.40.2&quot;' src="https://www.apple.com/media/us/mac-pro/2013/16C1b6b5-1d91-4fef-891e-ff2fc1c1bb58/videos/macpro_main_desktop.mp4"></source>
    </video>
</div>

    <script>
        // start video at frame 0
        var frameNumber = 0,
        
        // lower numbers = faster playback
        playbackConst = 800, 
        // select video element         
        vid = document.getElementById('v0'); 
        

    // Use requestAnimationFrame for smooth playback
    function scrollPlay(){  
    var frameNumber  = window.pageYOffset/playbackConst;
    vid.currentTime  = frameNumber;
    window.requestAnimationFrame(scrollPlay);
    }
    window.requestAnimationFrame(scrollPlay);
    
    </script>
</body>
</html>

我认为您的代码将当前时间设置为将来的新时间(向前滚动时(和过去的新时间(向后滚动时(。在这两种情况下，它都会开始正常播放视频(即向前(。

如果你想实际向后播放视频，你可能会发现这是一个很大的问题，因为大多数编码技术都假设向前播放 - 例如，第 9 帧可以通过获取第 6 帧并首先添加来自第 7 帧和第 8 帧的一些信息，然后是第 9 帧的信息来构建的。

对于流媒体视频，这是一个更大的问题，因为流几乎都设置为仅向前播放。

有一些方法(请参阅答案：是否可以反向播放HTML5视频？(，但我怀疑这些是否是您要找的。

相关文章：