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），并在几秒钟后隐藏/播放下一个视频/分钟使用setTimeout。

请参阅the doc了解详情，您可能需要切换到另一个视频。

在html 5的视频标签中播放图像

1 个答案: