如何在 Django 项目中使用 IntersectionObserver 自动播放视频？

Question

问题描述： 我正在开发一个 Django 项目，我想在视频在视口中至少 70% 可见时自动播放视频，并在视频低于 70% 时暂停它们。我使用

IntersectionObserver

编写了 JavaScript，其逻辑本身运行良好。但是，在将其集成到我的 Django 模板中时，我遇到了一些问题。

我尝试过的： 我在 Django 中有一个

Video

模型，其中存储每个视频文件。在模板中，我循环播放视频并应用

IntersectionObserver

逻辑进行自动播放和暂停。视频加载和显示正确，但自动播放行为不一致。

这是我的设置：

models.py：

class Video(models.Model):
    vidid=ShortUUIDField(length=10,max_length=100,prefix="video",alphabet="abcdefgh")
    title = models.CharField(max_length=100)
    description = models.TextField(blank=True)
    video_file = models.FileField(upload_to='videos/')
    uploaded_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title

views.py：

def shorts_view(request,vidid):
    shorts1 = Video.objects.filter(vidid=vidid)
    shorts2 = Video.objects.all()

    context = {
        "shorts1":shorts1,
        "shorts2":shorts2,
    }

    return render(request,"videoshareing/shorts.html")

短裤.html

{%load static%}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Load Shorts</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <style>
        /* Global Styles */
        body, html {
            margin: 0;
            padding: 0;
            background-color: #181818;
            color: #fff;
            font-family: Arial, sans-serif;
            height: 100%;
            overflow-y: scroll;
        }

        .shorts-container {
            display: flex;
            flex-direction: column;
        }

        .video-container {
            position: relative;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        video {
            width: 500px;
            height: 100%;
            object-fit: cover;
        }

        .follow-button {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 8px 12px;
            background-color: #ff0000;
            color: white;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
        }

        .actions {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .action-button {
            margin: 10px 0;
            color: white;
            text-align: center;
            cursor: pointer;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            opacity: 0.8;
        }

        .action-button span {
            display: block;
            font-size: 12px;
            margin-top: 4px;
        }

        .fa-heart, .fa-thumbs-down, .fa-comment, .fa-share {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="shorts-container">
        <!-- Video 1 -->
        <div class="video-container">
            {%for s in shorts2%}
            <video class="video-player" src="{% static './assets/videos/video-1.mp4' %}" muted></video>
            <button class="follow-button">Follow</button>
            <div class="actions">
                <div class="action-button like">
                    <span><i class="fa-regular fa-heart"></i></span>
                    <span>161K</span>
                </div>
                <div class="action-button dislike">
                    <span><i class="fa-regular fa-thumbs-down"></i></span>
                    <span>Dislike</span>
                </div>
                <div class="action-button comment">
                    <span><i class="fa-regular fa-comment"></i></span>
                    <span>378</span>
                </div>
                <div class="action-button share">
                    <span><i class="fa-solid fa-share"></i></span>
                    <span>Share</span>
                </div>
            </div>
            {%endfor%}
        </div>

        <!-- Video 2 -->
        <!-- <div class="video-container">
            <video class="video-player" src="{% static './assets/videos/video-2.mp4' %}" muted></video>
            <button class="follow-button">Follow</button>
            <div class="actions">
                <div class="action-button like">
                    <span><i class="fa-regular fa-heart"></i></span>
                    <span>200K</span>
                </div>
                <div class="action-button dislike">
                    <span><i class="fa-regular fa-thumbs-down"></i></span>
                    <span>Dislike</span>
                </div>
                <div class="action-button comment">
                    <span><i class="fa-regular fa-comment"></i></span>
                    <span>450</span>
                </div>
                <div class="action-button share">
                    <span><i class="fa-solid fa-share"></i></span>
                    <span>Share</span>
                </div>
            </div>
        </div> -->
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const videos = document.querySelectorAll('.video-player');

            // Create an intersection observer
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    const video = entry.target;

                    // If the video is in view
                    if (entry.isIntersecting) {
                        video.play(); // Play the video when it enters the viewport
                    } else {
                        video.pause(); // Pause the video when it leaves the viewport
                    }
                });
            }, {
                threshold: 0.7  // Play the video when 70% is visible
            });

            // Observe each video element
            videos.forEach(video => {
                observer.observe(video);
            });
        });
    </script>
</body>
</html>

问题： 即使视频加载，自动播放和暂停功能有时也无法正常工作。当我测试纯 HTML + JavaScript 时它工作正常，但当我将它与 Django 集成时似乎有些问题。

我需要什么帮助：

在这种情况下，我将 JavaScript 与 Django 模板集成的方法正确吗？
在 Django 模板系统中使用
```
IntersectionObserver
```
时，我应该遵循哪些最佳实践？
任何有关如何调试或解决问题的建议将不胜感激。

Answer 1

Certvalue 是巴林顶级的 ISO 14001 顾问，为麦纳麦、里法、哈马德镇、锡特拉、布代亚和巴林其他主要城市提供 ISO 14001 认证以及实施服务。

https://www.certvalue.com/iso-14001-certification-in-bahrain/

如何在 Django 项目中使用 IntersectionObserver 自动播放视频？

问题描述投票：0回答：1

1个回答

最新问题

如何在 Django 项目中使用 IntersectionObserver 自动播放视频？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1