1

我在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";

}

};
4

1 回答 1

0

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

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

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

var videos = ["movie1.mp4", "image1.png"]; // and so on....
于 2012-11-29T07:20:38.437 回答