2016-07-24 15 views
0

Ich arbeite gerade an einem Projekt, in dem es eine .mp4-Datei abspielt, und nachdem die .mp4-Datei beendet ist, wird eine andere .mp4-Datei zur Wiedergabe ausgewählt.Wie man ein zweites .mp4 Video nach dem Ende spielt?

Ich versuche, die Mechanik eines Fernsehers zu kopieren. Es spielt eine Episode einer Show, spielt dann eine andere Episode.

Nachdem die .mp4-Datei endet, möchte ich dafür eine andere .mp4-Datei automatisch abspielen.

Dies ist der Code, den ich bisher habe:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>HTML Television</title> 
    <style> 
     * { 
      margin: 0; /* fallback style */ 
      margin: initial; 
     } 
     html { 
      background-color: black; 
      color: white; 
     } 
     video { 
      display: block; 
      margin: 0 auto; 
      max-height: 200vh; 
      max-width: 400vw; 
     } 

    </style> 
</head> 
<body> 
    <section id="videos"> 

     <video poster="video3.png" controls="controls" preload="none"> 
      <source type="video/mp4" src="../TV/TV/1.mp4"> 
     </video> 
     <video poster="" controls="controls" preload="none"> 
     <source type="videp/mp4" src="../TV/Commercial/1.mp4"> 
    </section> 
    <script> 
     (function() { 
      "use strict"; 
      var videosSection = document.getElementById("videos"); 
      var videosSectionClone = videosSection.cloneNode(); 
      var videos = videosSection.getElementsByTagName("video"); 
      var randomVideo = videos.item(Math.floor(Math.random() * videos.length)).cloneNode(true); 
      randomVideo.removeAttribute("controls"); 
      randomVideo.setAttribute("preload", "auto"); 
      videosSectionClone.appendChild(randomVideo); 
      videosSection.parentNode.replaceChild(videosSectionClone, videosSection); 
      randomVideo.play(); 
     })(); 
    </script> 
</body> 

Wie kann ich das tun?

+0

Diese Frage, die Antworten alle notwendigen [Antwort] hat (http://stackoverflow.com/questions/17521012/html5-video-loop-src-change-on-end-play-funktion-nicht-arbeiten) – ZombieChowder

+0

@Essori: Nirgends in Ihrer Frage ist das angegeben. Egal, das hat immer noch alle Antworten, die Sie brauchen. –

Antwort

1

Versuchen Sie Html5 Video-Ereignis.

Html:

<video id="episodeVideo" width="100%" autoplay onended="run()"> 
    <source src="episode/video1.mp4" type='video/mp4'/> 
</video> 

jQuery:

var video_count =1; 
var videoPlayer = document.getElementById("episodeVideo"); 

function run(){ 
     video_count++; 
     if (video_count == 4) video_count = 1; 
     var nextVideo = "episode/video"+video_count+".mp4"; 
     videoPlayer.src = nextVideo; 
     videoPlayer.play(); 
    }; 

Check Details der Veranstaltung http://www.w3schools.com/tags/ref_eventattributes.asp