Question

我正在使用带有阵列的视频和图像制作幻灯片我有一个下一个按钮和上一个按钮。视频有效当我添加了按钮和播放以及所有内容将图片放入阵列并继续点击它们不会出现确定如何做到这一点。每次你打到下一个或上一个标题更新以匹配最新显示，也可以正常工作。也我的视频只能在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";

}

};

Answer 1

在nextPhoto()功能中，您可以使用

设置当前图像或视频

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

这适用于mp4文件，但没有别的。我建议您将文件扩展名添加到数组中。

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

尝试使用阵列制作带有视频和图像的幻灯片，但图片不会显示出来

1 个答案: