在html 5的video标签中播放图片

Question

我有使用 JavaScript 在特定时间内在 2 个视频之间显示 2-3 个图像的问题陈述。有谁知道如何实现这一目标？ 我已经编写了以下代码来执行此操作，但是在播放图像后，视频开始显示错误，并且在一段时间后脚本变得完全不稳定后，视频得到了脚本

<html>
<head>
<title>video example</title>
</head>

<body onload="onload();">
   <video id="myVideo" height="400" width="400" autoplay onended="next();">
   </video>

   <img id="img" height="400" width="400" src="">

   <script>
     var video_list      = ['video/video1.mp4','video/1.png','video/2.png','video/video2.mp4','video/video3.mp4'];
      var video_index     = 0;
      var video_player    = null;
      var image           = null;
      var video = null;
      var length = video_list.length;
      var last_video = null;

      function next(){
          video = video_list[video_index];
          console.log(video);
          var ext = video.split('.').pop().toLowerCase();
          if(ext=="mp4"||ext=="3gp")
          {
              last_video = video
              playvideo();
          }
          else
          {
              video_player.play();
              runimg();
          }
          video_index++;
          if(video_index==length)
          {
              video_index = 0;
          }
      }

      function runimg()
      {
          image.style.visibility = 'visible';
          video_player.style.visibility = 'hidden';
          image.setAttribute("src",video);
          setInterval(next,3000);
      }

      function playvideo()
      {
          image.style.visibility = 'hidden';
          video_player.style.visibility = 'visible';
          video_player.setAttribute("src", video);
          var playPromise = video_player.play();
          if (playPromise !== undefined) {
              playPromise.then(_ => {})
              .catch(error => {
                console.log(error);
                video_player.pause();
              });
          }
          else
          {
              video_player.pause();
          }
      }



      function onload(){
          console.log("body loaded");
          video_player        = document.getElementById("myVideo");
          image               = document.getElementById("img");
          next();
          // video_player.setAttribute("src", video_list[video_index]);
          // video_player.play();
      }

      function onVideoEnded(){
          console.log("video ended");
          video_player.setAttribute("src", video);
          video_player.play();
      }
  </script>
</body>
</html>

请查看代码并提出一些解决方案

Answer 1

您可以收听每个视频ended 事件，然后在视频容器上方显示您的图像（例如，在 CSS 中使用 position: absolute），并在几秒/分钟后使用 @ 隐藏它/播放下一个视频987654325@.

请参考the doc 了解更多信息，您可能需要它来切换到另一个视频。