Scroll Magic固定和HTML 5视频标签

Question

我正在使用Scroll Magic JS。我的目标是使用固定方法将我的HTML5视频（下方）固定在背景中，同时使文本在其上滚动。

<video preload="auto" autoplay="autoplay" loop="loop" id="bgvid">
    <source src="../../pictures/coding.mp4" type="video/mp4">
</video>

我的Javascript：

var scene_statement = new ScrollScene({triggerElement: "#trigger5", duration: 400})
                    .setPin("#bgvid")
                    .addTo(controller);

如果我不包含JavaScript，视频可以完美播放（显然不能固定），当我使用JavaScript来固定图片时，它可以完美运行。

但是当我将JavaScript用于视频时，视频仍然出现并被固定，但是无法播放。有人知道如何解决这个问题吗？

谢谢

- RyanY

---

你尝试过将视频放在一个<div>标签中并固定它吗？ - irot

是的，仍然导致视频无法播放。 - RyanY

你能否提供一个 jsfiddle 或 codepen 让我们观察和检查这个行为？ - Jan Paepke

Answer 1

我最近遇到了一个问题，就是固定后的视频无法播放。我已经通过在进入事件处理程序中强制再次播放视频来解决这个问题。像下面这样的伪代码应该能解决问题。

.on("enter", function (event) {
    $('video').get(0).play();
 })

- Reggie Granados

---

很好，谢谢。我在设置场景后添加了$('video').get(0).play();，运行良好。 - Florian Rachor