Fatal编程技术网
  • javascript/
  • Javascript 如何在背景视频结束后显示视频

Javascript 如何在背景视频结束后显示视频

javascript html video

Javascript 如何在背景视频结束后显示视频,javascript,html,video,Javascript,Html,Video,我如何编写一个背景视频代码，在它运行到最后时，它将一直播放到最后。在我的背景视频上方会显示另一个视频（，以前是隐藏的）。我一开始就看到了这篇文章，但我实在想不出如何在我的背景视频结束后弹出第二个视频 这是我的背景视频： 这是我想在背景视频播放完毕后嵌入的视频： <video controls muted playsinline id="akiratrailer"> <source src="videos/akiratrailer.mp4" type="video/mp4"&

我如何编写一个背景视频代码，在它运行到最后时，它将一直播放到最后。在我的背景视频上方会显示另一个视频（，以前是隐藏的）。我一开始就看到了这篇文章，但我实在想不出如何在我的背景视频结束后弹出第二个视频

这是我的背景视频：

这是我想在背景视频播放完毕后嵌入的视频：

<video controls muted playsinline id="akiratrailer">
<source src="videos/akiratrailer.mp4" type="video/mp4">
<source src="videos/akiratrailer.webm" type="video.webm">
</video>
这是我的CSS

<style media="screen" type="text/css">

        video#bgvid { 
        position: fixed;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        -ms-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        background-size: cover; 
        overflow: hidden;
        }

        #body{
        position: fixed;
        height: 100%;
        width: 100%;
        }

</style>


视频#bgvid{
位置：固定；
最高：50%；
左：50%；
最小宽度：100%；
最小高度：100%；
宽度：自动；
高度：自动；
z指数：-100；
-ms转换：translateX（-50%）translateY（-50%）；
-moz变换：translateX（-50%）translateY（-50%）；
-webkit转换：translateX（-50%）translateY（-50%）；
转化：translateX（-50%）translateY（-50%）；
背景尺寸：封面；
溢出：隐藏；
}
#身体{
位置：固定；
身高：100%；
宽度：100%；
}
我用另一个视频进行了测试，因为我无法访问你的视频。 下面的代码是一个接一个地运行视频：

<!DOCTYPE html> 
<html> 
<body> 

<p>Press play and wait for the video to end.</p>

<video autoplay preload muted playsinline id="bgvid" width="320" height="176" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<br/>
<video  muted playsinline id="akiratrailer" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script>
var vid = document.getElementById("bgvid");
vid.onended = function() {
    document.getElementById('akiratrailer').play();
};
</script>

<p>Videos courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>


按play并等待视频结束

您的浏览器不支持HTML5视频。


您的浏览器不支持HTML5视频。
var vid=document.getElementById（“bgvid”）；
vid.onended=函数（）{
document.getElementById（'akiratrailer'）.play（）；
};
提供的视频
如果您在那里尝试，它将运行：

只需复制我的代码，继续链接，删除所有内容，将我的代码粘贴到链接上 然后运行它以查看结果

此外,， 如果要切换video1和video2，可以执行以下操作：

<!DOCTYPE html> 
<html> 
<body> 

<p>Press play and wait for the video to end.</p>

<video autoplay preload muted playsinline id="bgvid" width="320" height="176" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<br/>
<video  muted playsinline id="akiratrailer" controls style="display:none">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>


<script>
var vid = document.getElementById("bgvid");
var vid2 = document.getElementById('akiratrailer');
vid.onended = function() {
    vid.style.display = "none";
    vid2.style.display = "block";
    vid2.play();

};
</script>

<p>Videos courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>


按play并等待视频结束

您的浏览器不支持HTML5视频。


您的浏览器不支持HTML5视频。
var vid=document.getElementById（“bgvid”）；
var vid2=document.getElementById（'akiratrailer'）；
vid.onended=函数（）{
vid.style.display=“无”；
vid2.style.display=“块”；
vid2.play（）；
};
提供的视频
但我只有一个视频运行测试，所以它似乎是相同的视频巫婆循环。但这不是两个截然不同的视频。你得试着用你的来看看

如果您想在第一个视频的末尾显示第二个视频，第一个女巫在背景中，您可以执行以下操作：

<!DOCTYPE html> 
<html> 
<body> 

<p>Press play and wait for the video to end.</p>

<video autoplay preload muted playsinline id="bgvid" width="320" height="176" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<br/>
<video  muted playsinline id="akiratrailer" controls style="display:none">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>


<script>
var vid = document.getElementById("bgvid");
var vid2 = document.getElementById('akiratrailer');
vid.onended = function() {
    //vid.style.display = "none";
    vid2.style.display = "block";
    vid2.play();

};
</script>

<p>Videos courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>


按play并等待视频结束

您的浏览器不支持HTML5视频。


您的浏览器不支持HTML5视频。
var vid=document.getElementById（“bgvid”）；
var vid2=document.getElementById（'akiratrailer'）；
vid.onended=函数（）{
//vid.style.display=“无”；
vid2.style.display=“块”；
vid2.play（）；
};
提供的视频
谢谢，但我正在尝试先隐藏第二个视频。因此，当我的第一个（背景）视频结束时，第二个视频将自动取消隐藏。我正在考虑通过在第二个视频中加入延迟淡入来对贫民窟进行编码。但即便如此，我该如何编写代码呢？我看这个是为了参考你可以做的：隐藏第一个视频，然后在vid.onended=function（）中以你想要的方式显示第二个视频{，你在那里做的事情是在视频完成后完成的。我建议你在页面加载中隐藏第二个视频，然后在第一个视频结束时，隐藏第一个视频并显示第二个视频。在视频完成后，有没有办法不隐藏第一个视频，因为它是网页的背景。所以基本上我要找的是要让第一个背景视频完成并保持在那里，而第二个视频在第一个背景视频完成并保持在背景中后自动取消隐藏。这就是为什么我建议使用CSS进行淡入过渡，我知道它对文本有效，但对视频有效吗？我添加了第三个不隐藏第一个视频的案例。你知道吗必须对vid.onended=function（）中的vid.style.display=“none”行进行注释。我只有两个视频标签，因此我看不出在没有完整代码的情况下它如何与css一起运行谢谢，我拿出了vid.style.display=“none”这是有效的。顺便说一句，视频中是否有淡入淡入的功能？我知道如何使用css淡入文本，但idk是否对视频也有同样的功能。此外，我编辑并发布了我的css代码。