尝试使用数组制作包含视频和图像的幻灯片，但图片不会显示答案

【问题标题】：trying to make a slide show with videos and images using an array but the pictures wont show up尝试使用数组制作包含视频和图像的幻灯片，但图片不会显示
【发布时间】：2012-11-17 05:00:17
【问题描述】：

我正在使用包含数组的视频和图像制作幻灯片 javascript 我有一个下一个按钮和上一个按钮。视频有效使用按钮和播放以及我添加时的所有内容图片进入数组并继续点击下一步他们不会显示不确定如何做到这一点。此外，每次您点击下一个或上一个字幕更新以匹配所显示的内容，这也可以正常工作。还我的视频只能在 chrome 中使用，知道如何解决这个问题吗？这是我的 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";

}

};

【问题讨论】：

标签： javascript arrays html video slideshow

【解决方案1】：

在nextPhoto() 函数中，您可以使用设置当前图像或视频

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

这适用于 mp4 文件，但不适用于其他文件。我建议您像这样将文件扩展名添加到您的数组中。

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

【讨论】：

它只是让下一个和上一个按钮在我点击时什么都不显示
是的，当我单击下一个和上一个按钮时，视频现在会显示，但图片仍然不会显示
您是否在图像名称中添加了图像扩展名？您还将图像添加到视频元素中。这也可能导致问题。
是的，我添加了扩展，还有其他方法可以尝试编码吗？