1

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

}

};
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 に答える