Wiedergabe von Bild im Video-Tag von HTML 5

-2

Ich habe Problemstellung von 2-3 Bildern zwischen 2 Videos für eine bestimmte Zeit mit JavaScript. Hat jemand eine Idee, wie dies erreicht werden kann? Ich habe den folgenden Code geschrieben, dies zu tun, aber nachdem das Bild das Video abgespielt wird startet Fehler zeigt und die Videos erhalten Skript nach einiger Zeit das SkriptWiedergabe von Bild im Video-Tag von HTML 5

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

Bitte haben Sie einen Blick auf den Code völlig instabil wird und vorschlagen mit setTimeout einige Lösung

Quelle

2017-10-31 Sushant

http://idownvotedbecau.se/noattempt/ – user3351605

sry war noch die Fehler im Code zu finden versuchen, das ist, warum es nicht hochgeladen haben – Sushant

Dank für das Hinzufügen, rückgängig gemacht downvote – user3351605

Sie können jedem Video ended Veranstaltung hören, dann zeigen Sie Ihr Bild über dem Video-Container (position: absolute in CSS, zum Beispiel), und verstecken es/das nächste Video nach wenigen Sekunden/Minuten spielen.

Bitte lesen Sie the doc, um mehr zu erfahren. Sie werden es wahrscheinlich brauchen, um zu einem anderen Video zu wechseln.

Quelle

2017-10-31 11:58:50 Max

ich das gleiche versucht, aber es nicht funktioniert hat in meinem Fall – Sushant

@Sushant kann ich Ihnen versichern, es funktioniert, nur hier getestet: https://codepen.io/anon/pen/xPZbwg – Max

Sie legen beide Bild und Video in der Playlist-Array und dann versuchen, weil ich denke, dass meine Playlist enthält beides, während du nur Videos in Playlist berücksichtigt hast – Sushant

Wiedergabe von Bild im Video-Tag von HTML 5

Antwort

Verwandte Themen