javascript - 根据滚动位置触发视频自动播放

标签 javascript jquery video.js

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

在此处输入代码 $(document).ready(function() {

$(窗口).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');
    }


});

});

最佳答案

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

如果有人感兴趣,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>');

关于javascript - 根据滚动位置触发视频自动播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15594881/

相关文章:

javascript - 在 JavaScript 响应上使用时 videojs 播放按钮不起作用

javascript - 在标题移回页面顶部后将文本保持在原位

html - 哇扎 : Video could not played when using dynamic smil

javascript - 如何从 HTML5 日期输入中解析日期?

javascript - 获取表中 td 内选择标签的选定选项值

javascript - 下载我在html中选择的文件

javascript - 我可以确定单击哪个按钮来触发 onSubmit 事件吗?

javascript - 如何访问Angular 2中VideoJs函数中的成员变量和方法?

javascript - 如何刷新div而不添加

javascript - 用javascript更改<audio> src