7

我正在编写一个使用 scrollorama.js 脚本中的擦除动画的脚本。我希望能够实现一个视频以在滚动深度中的某些标记处自动播放：即，当一个视频页面清除了另一个页面并且现在可以完全查看时。我已经想出了如何测量滚动深度，我成功地将它记录在我的控制台中。我已经想出了如何测量我滚动的深度，但也许我太累了，我不知道如何让视频以滚动深度自动播放。我希望这是一个法律问题，并且我可以得到一些帮助。有没有人在那里尝试过这个？这是到目前为止的代码。

enter code here$(文档).ready(函数() {

$(窗口).scroll(函数(e) {

  var scrollAmount = $('body').scrollTop();
  console.log(scrollAmount);

});

    var controller = $.superscrollorama();
    var pinDur = 800;   
    // create animation timeline for pinned element
var pinAnimations = new TimelineLite();

//pinAnimations.append([TweenMax.to($('#green'), .5, {css:{top:0}})], .5)
pinAnimations.append([TweenMax.to($('#intromovie'), .5, {css:{top:0}})], .5 )
pinAnimations.append([TweenMax.to($('#red'), .5, {css:{top:0}})], .5) 
pinAnimations.append([TweenMax.to($('#blue'), .5, {css:{top:0}})], .5 )
pinAnimations.append([TweenMax.to($('#movie1'), .5, {css:{top:0}})], .5);
pinAnimations.append([TweenMax.to($('#history1'), .5, {css:{top:0}})], .5);
//pinAnimations.append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}}));


controller.pin($('#content_wrapper'), pinDur, {
    anim:pinAnimations, 
    onPin: function() {
        $('#content_wrapper').css('height','100%');
    }, 
    onUnpin: function() {
        $('#content_wrapper').css('height','1000px');
    }


});

});
4

3 回答 3

3

我想通了，所以我在此处拼凑在一起的许多其他答案的帮助下回答了我自己的问题！

如果有人感兴趣，html很简单：

    <div id="videoHolder"></div>

Jquery 也很简单：

        $(function(){

    $(window).scroll(function(e) {

        var scrollAmount = $('body').scrollTop();   
        console.log(scrollAmount);


    if(scrollAmount >="theamountyouwant" && scrollAmount <= "theotheramountyouwant") {


        $("#videoHolder").html(
            '<video width="1200" height="700" autoplay>' +

         '<source src="http://itp.nyu.edu/~rnr217/HTML5/Week3/video/testopen.webm" type="video/webm"></source>'  +
        '<source src="http://itp.nyu.edu/~rnr217/HTML5/Week3/video/testopen.mp4" type="video/mp4"></source>' +

         '</video>');
于 2013-04-07T14:00:16.843 回答
0

只需从下面添加脚本并将 playonscroll 参数添加到页面上任何位置的视频标签。

有时它需要使用与 body 不同的滚动容器，有时它并不明显，所以下面的代码对我来说就像一个魅力：

setInterval(function () {
    $('video[playonscroll]').each(function () {
        var videoElement = $(this)[0]; 
        var eTop = $(this).offset().top;
        var elementOffestY = (eTop - $(window).scrollTop());
        var videoOffset = [elementOffestY, elementOffestY+$(this).height()];
        if ((videoOffset[0] < 100) && (videoOffset[1] > 350)) {
            console.log('play');
            if (!videoElement.playing) {
                videoElement.play();
            }
        } else {
            if (videoElement.playing) {
                videoElement.pause();
            }
        }
    });
},300);

如果您总是使用 body 容器进行滚动，只需将 setInterval 更改为 $(window).scroll

并且不要忘记为 Video 标签元素定义属性：

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
    get: function(){
        return (this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
    }
})
于 2017-07-05T12:56:13.440 回答
0

所以在这种情况下，我们可以使用一个集成的 JavaScript API，即Intersection Observer。现在我们的主要任务是在特定位置播放视频，因此对于此任务，我们将在 intersectionRatio 值上设置触发器。

const images = document.querySelectorAll(".mydivTriggerClass");

vid = document.getElementById("myVideoId");

observer = new IntersectionObserver((entries) => {
  console.log(entries);

  if (entry.intersectionRatio > 0.34) {
    vid.play();
  } else {
    entry.target.style.animation = "none";
  }
});

observer.observe(image);

注意：请注意，控制台日志条目是可选的 - 它只是为了在您检查时获得显示此交叉比率来自何处的信息。

如需完美的工作示例，请访问此链接。

于 2020-05-11T07:45:16.313 回答