2016-07-24 20 views
0

私は現在、.mp4ファイルを再生するプロジェクトで作業しており、.mp4ファイルの終了後、別の.mp4ファイルを選択して再生します。2つ目の.mp4ビデオを終了した後で再生する方法は?

私はテレビの仕組みをコピーしようとしています。 ショーのエピソードを演奏し、別のエピソードを演奏します。

.mp4ファイルの終了後、別の.mp4ファイルを自動再生したいと思います。

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

私はこれをどのように操作を行うことができます。

これは私がこれまで持っているコードのですか?

+0

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(); }; 

チェック詳細この質問はあなたが[回答]を必要とするすべての答えを持っている(http://stackoverflow.com/question/17521012/html5-video-loop-src-change-on-end-play-function-not-working) – ZombieChowder

+0

@エソーシー:あなたの質問のどこにも述べられていません。それにもかかわらず、それはあなたが必要とするすべての答えを持っています。 –

答えて

1

Html5ビデオのイベントをお試しください。

HTML:

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

のjQuery:イベント http://www.w3schools.com/tags/ref_eventattributes.asp

関連する問題