页面刷新时如何更改背景元素

Question

我有两个背景元素（一个图片一个视频）。仅在第一次加载页面时才显示图片，然后仅在刷新页面时才使用视频背景？

我在图片中尝试了不重复，但没有成功。我认为本地存储计数器不起作用，因为每次从头开始加载页面时，它都会记住先前的数字。

<!-- image background -->
<style>
html { 
background: url("{% static 'images/calc_background2.jpg' %}") no- 
repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.fullscreen-bg {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        z-index: -100; 
        }

.fullscreen-bg__video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        }
</style>

<!-- video background -->
<div class="fullscreen-bg">
<video autoplay muted poster="{% static 'images/background2.jpg' %}" 
class="fullscreen-bg__video" id="myVideo"> <!--autoplay-->
<source src="{% static 'videos/calc_background_vid109.mp4' %}" 
type="video/mp4">
</video>
</div>   

页面首次打开时，我们会看到图像背景。刷新页面后，将播放视频背景。 感谢您的帮助！