試圖做一個幻燈片放映與視頻和圖像使用陣列，但圖片不會顯示

即時製作幻燈片使用視頻和圖像與數組在 javascript我有一個下一個按鈕和上一個按鈕。視頻的工作與按鈕和播放和一切只是當我添加圖片到陣列，並繼續點擊下一步，他們不會出現不是當然如何做到這一點。同樣，每當您點擊下一個或上一個字幕更新以匹配顯示內容時，該功能也可以正常工作。也我的視頻只能在鉻的任何想法如何解決這個問題？這裏是我的 HTML和JavaScript代碼試圖做一個幻燈片放映與視頻和圖像使用陣列，但圖片不會顯示

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>javascript homework 2</title> 



<link href="css/styles.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
    <div id="mainImg"> 
    <h2 id="caption">movie1</h2> 
    <video id="myVideo" src="video/movie1.mp4" type="video/mp4"/></video> 



    </div> 
    <div id="controls"> 
    <div id="playToggle" class="player-button">Play</div> 
</div> 

    <div id="links"> 
     <ul> 
      <a onClick="nextPhoto();" href="#">Next</a> 

      <a onClick="prePhoto();" href="#">Previous</a> 
     </ul> 
    </div> 

</body> 
<script src="js/javascript.js"></script> 
</html> 








// JavaScript Document 

/*---Global varibales--*/ 





var currentImage = 0; 



var count = 0;    
var videos = new Array("movie1", "movie2", "movie3","Dk1", "Dk2", "Dk3"); 


var captions = new Array("movie1", "movie2", "movie3", "Dark Knight 1", "Dark Knight 2", "Dark Knight 3"); 


var video = document.createElement("video"); 
var playPauseButton = document.getElementById('playToggle'); 


function switchVideo() { 
    video.setAttribute('src',videoPaths[CurrentVideos]);          
    video.onload = function() {     
     currentVideo++;      
     if (currentVideo >= videoPaths.length) {  
      currentImage = 0; 
     } 

    } 
} 



function changeVideo(movie) 
{    
    var thisVideo = "video/"+videos[movie]+".mp4"; 
    document.getElementById("myVideo").src = thisVideo; 
    document.getElementById("caption").innerHTML = captions[movie]; 
    count = movie; 
} 

function nextPhoto() 
{ 
    count++;  

    if(count==videos.length) 
    { 
     count = 0; 
    } 

    var thisVideo = "video/"+videos[count]+".mp4"; 
    document.getElementById("myVideo").src = thisVideo; 
    document.getElementById("caption").innerHTML = captions[count]; 
} 

function prePhoto() 
    { 

    count--;  

    if(count < 0) 
    { 
     count = videos.length-1;  
    } 

    var thisVideo = "video/"+videos[count]+".mp4"; 
    document.getElementById("myVideo").src = thisVideo; 
    document.getElementById("caption").innerHTML = captions[count]; 
} 

playPauseButton.onclick = function() { 
    if (myVideo.paused) { 
     myVideo.play(); 
     this.innerHTML = "Pause"; 
    } else { 
    myVideo.pause(); 
    this.innerHTML = "Play"; 

} 

};

來源

2012-11-29 zac

在nextPhoto()功能通過使用

var thisVideo = "video/"+videos[count]+".mp4";

這適用於MP4文件，但沒有別的設置當前圖像或視頻。我建議你像這樣將文件擴展名添加到你的數組中。

var videos = ["movie1.mp4", "image1.png"]; // and so on....

來源

2012-11-29 07:20:38 Bruno

是啊，我試過，但它沒有工作 – zac

它只是做了一個和上一個按鈕，讓沒有顯示出來，當我點擊 – zac

你從你的代碼中刪除'+ .mp4'部分。 – Bruno

試圖做一個幻燈片放映與視頻和圖像使用陣列，但圖片不會顯示

回答

相關問題