javascript 滚动播放视频

zqdjd7g9 于 2023-03-28 发布在 Java

关注(0)|答案(2)|浏览(128)

我想在滚动时播放视频。无论如何，我实现了向前播放，但当我向后滚动时，视频不向后播放，而是向前播放。
下面是我的代码：

//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
}

谁能告诉我，我错在哪里？”

JavaScript

来源：https://stackoverflow.com/questions/27610597/play-video-on-scroll

2条答案

按热度按时间

eqfvzcg81#

我认为您的代码将当前时间设置为未来的新时间（向前滚动时）和过去的新时间（向后滚动时）。在这两种情况下，它将开始正常播放视频（即向前）。
如果你想实际上播放视频倒退，你可能会发现这是一个相当大的问题，因为大多数编码技术假设播放前进-例如，第9帧可能是通过采取第6帧，并添加一些信息，从第7帧和第8帧第一，然后信息的第9帧。
对于流媒体视频，这甚至是一个更大的问题，因为流几乎都将被设置为只向前播放。
有一些方法（见以下网址的答案：Is it possible to play HTML5 video in reverse?）但我怀疑这些中是否有一个是你要找的。

赞(0）回复(0）举报 2023-03-28

pdkcd3nj2#

我不知道你想存档什么，我想你想通过上下滚动来控制视频。
我在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>

赞(0）回复(0）举报 2023-03-28

我来回答

javascript 滚动播放视频

2条答案

相关问题

热门标签

最新问答