无法在 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 (将#修改为@)