Question

如何编写将播放的背景视频以及播放结束后的视频。另一个视频显示在我的背景视频之上（之前隐藏的）。我开始看到这篇文章，但我不能为我的生活，弄清楚如何在我的背景视频结束后弹出第二个视频。 Detect when an HTML5 video finishes

这是我的背景视频：

<video autoplay preload muted playsinline id="bgvid"> <source src="videos/akira.mp4" type="video/mp4"> <source src="videos/akira.webm" type="video.webm"> </video>

这是我想要在我的后台视频完成播放后嵌入的视频：

<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>

Answer 1

我测试了其他视频，因为我无法访问您的视频。下面的代码是一个接一个地运行视频：

Starting the game...
This is a playership, please be careful!
I have a playership now.
The end of the Game

如果你在那里尝试它会运行： https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_event_ended2

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

此外，如果你想切换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>
  <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>

但我只有一个视频来运行测试，所以它似乎是同一个视频女巫循环。但这不是两个截然不同的视频。你必须和你一起去看看。

如果你想在上面第一个结尾处显示第二个视频，那么第一个女巫在后台就可以了：

<!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>

在背景视频完成后如何制作视频

1 个答案: