2

したがって、1 つの div コンテナーとボタンを含む単純なページがあり、ユーザーがボタンをタップして新しいビデオを div にロードできるようにしたいと考えています。

全部で 8 つの動画があります。ページは自動再生とループの動画 1 から始まります。次に、ユーザーがページの下部にあるボタンをタップすると、動画 2 が読み込まれ、ボタンをもう一度タップするまで自動再生されてループします。動画を読み込む 3.

それが理にかなっていることを願っています！これは簡単にできると思いますが、理解するのに何日もかかることを知っています!

どんな助けでも素晴らしいでしょう！

ここに私のコードがあります、

<div id="vidBox">
    <video width= "977" height= "721" src= "1.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay"</video>
</div>

$("#vidBox").empty().append( video width= "977" height= "721" src= "2.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay" );
$("#vidBox").empty().append( video width= "977" height= "721" src= "3.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay" );
$("#vidBox").empty().append( video width= "977" height= "721" src= "4.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay" );
etc etc etc

これが私の更新されたコードです

<!DOCTYPE html> 
<html>
<head>
<title>Video Player</title> 
<script type="text/javascript">
    $("document").ready(function () {
    var vid1 = $("<video width= "977" height= "721" src= "1.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay"</video>");
    var vid2 = $("<video width= "977" height= "721" src= "2.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay"</video>");
    var vid3 = $("<video width= "977" height= "721" src= "3.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay"</video>");
    var vid4 = $("<video width= "977" height= "721" src= "4.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay"</video>");
    var vid5 = $("<video width= "977" height= "721" src= "5.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay"</video>");
    var vid6 = $("<video width= "977" height= "721" src= "6.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay"</video>");
    var vid7 = $("<video width= "977" height= "721" src= "7.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay"</video>");
    var vid8 = $("<video width= "977" height= "721" src= "8.mp4"  type= "video/mp4" loop= "loop" autoplay="autoplay"</video>");
});
</script>
<script>
    window.myVids = ["1.mp4", "2.mp4", "3.mp4", "4.mp4", "5.mp4", "6.mp4", "7.mp4", "8.mp4"];
</script>
<script>
   var currentIndex = 0;
   var $video = $("#vidBox video");
   $("#myButton").click(function() {
      video.attr("src", myVids[++currentIndex]);
   });
</script>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div id="vidBox">Content for New Div Tag Goes Here</div>
<button id="myButton">Click Me</button>
</body>
</html>
4

1 に答える 1