Html 视频播放列表

Question

我的页面上有一个视频播放器，可以根据按下的链接播放视频。

我正在尝试创建它，以便它还能够根据另一个按钮跳到视频的某个部分。

到目前为止，我让他们都在不同的页面上工作。 这是我到目前为止所拥有的：

<div id="video-player"> 

       <img src="images/videoplayer/screen680.png" id="video-screen"/>    
      <video id="videoarea" poster="" src=""></video>

      <ul id="playlist">
        <li movieurl="video/1.Adele Gillies_short_compressed.mp4" id="myvideo">

            <button class="video-button left-menu"  id="education-jump">vid1 education</button>
            <button class="video-button left-menu" id="education-jump2">vid2 eductaion</button>
        </li>

        <li movieurl="video/1.William Morrison_short-comp.mp4" id="myvideo2">
            <button class="video-button left-menu"  id="relationship-jump">vid1 relationships</button>
            <button class="video-button left-menu" id="relationship-jump2">vid2 relationships</button>
        </li>


      </ul>
  </div> 

 <script> 
            var myvideo = document.getElementById("myvideo"),
            playbutton = document.getElementById('playme'),
            jumplink1 = document.getElementById('education-jump');
            jumplink2 = document.getElementById('education-jump2');


        jumplink1.addEventListener("click", function (event) {
            event.preventDefault();
            myvideo.play();
            myvideo.pause();
            myvideo.currentTime = 200;
            myvideo.play();
        }, false);

         jumplink2.addEventListener("click", function (event) {
            event.preventDefault();
            myvideo.play();
            myvideo.pause();
            myvideo.currentTime = 170.1;
            myvideo.play();
        }, false);





    </script>

<script type="text/javascript">
          $(function() {
    $("#playlist li").on("click", function() {
        $("#videoarea").attr({
            "src": $(this).attr("movieurl"),
            "poster": "",
            "autoplay": "autoplay"
        })
    })
    $("#videoarea").attr({
        "src": $("#playlist li").eq(0).attr("movieurl"),
        "poster": $("#playlist li").eq(0).attr("moviesposter")
    })
})
        </script>

Answer 1

这会将事件附加到按钮（而不是 <li>），但仍会从父组中读取 URL，但会从用于触发加载的按钮中设置假时间属性

为避免过多闪烁，它还会检查视频是否正在更改（在这种情况下，它会重新加载整个视频）或者视频是否相同，只是一个新位置，它所做的只是改变当前时间。

我想这就是你所追求的......

     <div id="video-player"> 

      <video id="videoarea" poster="" src="" proload="auto" controls></video>

      <ul id="playlist">
        <li movieurl="video.mp4" id="myvideo">
            <button class="video-button left-menu"  id="education-jump" time="20">vid1 education</button>
            <button class="video-button left-menu" id="education-jump2" time="30">vid2 eductaion</button>
        </li>

        <li movieurl="video2.mp4" id="myvideo2">
            <button class="video-button left-menu" id="relationship-jump" time="10">vid1 relationships</button>
            <button class="video-button left-menu" id="relationship-jump2" time="50">vid2 relationships</button>
        </li>

      </ul>
  </div> 

<script> 
    var myvideo = document.getElementById("videoarea")

    $(".video-button").on("click", function() {
        // if we need to load a new video do so
        if ($("#videoarea").attr("src") != $(this).parent().attr("movieurl")) {
            $("#videoarea").attr({
                "src": $(this).parent().attr("movieurl"),
                "poster": "",
                // load a fake attribute with the desired start time
                "starttime": $(this).attr("time")})
            $("#videoarea").on("canplay",function() {
                // set the current time to the fake attribute
                myvideo.currentTime=$(this).attr("starttime")
                myvideo.play();
                // remove the event to stop it triggering multiple times
                $("#videoarea").off("canplay")
            })
        } else {
            // if the video URL didn't change, just adjust the time
            myvideo.currentTime=$(this).attr("time")
        }
    })

 </script>