微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

无法在 Django 中使用 scrollmagic 滚动视频

如何解决无法在 Django 中使用 scrollmagic 滚动视频

我正在构建一个网络应用程序,视频沿着滚动播放,它工作得很好,但是当我将它合并到 django 中时,视频在滚动时无法播放。

我在 javascript 中使用了 scrollmagic 插件和 jquery。 我在 setting.py 中包含了 static_root 和 我也尝试从 django 的媒体文件中访问视频,但仍然没有用。

HTML 文件

<main class="content">
    <div class="container">
        <video src="{% static 'images/My Video.mp4' %}"></video>
    </div>
</main>

我还是 javascript 的新手我通过观看 youtube 教程尝试了这个

Javascript 文件

var controller = new ScrollMagic.Controller();
const video = document.querySelector('video');
var scene2 = new ScrollMagic.Scene({
    duration: 9000,triggerElement: "main",triggerHook: 0
})
.addindicators()
.setPin('main')
.addTo(controller);

let scrollpos = 0;
let accelamount = 0.1;
let delay = 0;
scene.on("update",e => {
    scrollpos = e.scrollPos / 700;
});


setInterval( () => {
    delay += (scrollpos - delay) * accelamount;
    // console.log(scrollpos,delay);
    video.currentTime = delay;

},20);

settings.py

# Static files (CSS,JavaScript,Images)

STATIC_URL = '/static/'
STATICFILES_Dirs = [
os.path.join(BASE_DIR,'static')
]

我知道从静态访问视频文件是不对的,但即使我通过创建“media_root”并使用“media_url”来获取视频,它也不起作用。

但正如前面提到的,如果我不使用 django 作为框架并且直接打开 html 文件,它就可以正常工作。

如果有人知道如何解决这个问题,那将是一个很大的帮助。 谢谢。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。