Javascript和HTML5-按钮播放下一个视频不起作用

Question

Thanks for stopping by. I'm creating a page to cycle through video clips. The cycling through part (run() function) works just fine. I also created a few buttons to play the specific video clip and these are not working. I've only written the function for the first button and I'll write the other two when I get the first working.

Any help if greatly appreciated.

Thanks, Tommy

<video id="tutorials" autoplay onended="run()" 
    autobuffer="true" width="600px" height="350px" controls>
<source src="video1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

<br>
<br>

<button id="tut1">Play Tutorial 1</button>
<button id="tut2">Play Tutorial 2</button>
<button id="tut3">Play Tutorial 3</button>

<script type="text/javascript">

    video_count =1;
    videoPlayer = document.getElementById("tutorials");

    function run()
    {
        video_count++;
        if (video_count == 4) return;
        var nextVideo = "video"+video_count+".mp4";
        videoPlayer.src = nextVideo;
        videoPlayer.play();
    };

    document.getElementByID("tut1").onclick = function()
    {
        videoPlayer.stop();
        videocount = 1;
        var video = "video1.mp4";
        videoPlayer.src = video;
        videoPlayer.play();
    }

</script>

Answer 1

I'd prefer to structure the code this way:

<script type="text/javascript">

  video_count =1;
  videoPlayer = document.getElementById("tutorials");

  function runNext()
  {
    runVideo(video_count+1);
  }

  function runVideo(number)
  {
    if (number > 3) return;
    video_count = number;
    videoPlayer.src = "video"+video_count+".mp4";
    videoPlayer.play();
  }

</script>

HTML:

<button id="tut1" onclick="runVideo(1);">Play Tutorial 1</button>
<button id="tut2" onclick="runVideo(2);">Play Tutorial 2</button>
<button id="tut3" onclick="runVideo(3);">Play Tutorial 3</button>