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，但会从用于触发加载的按钮设置虚假时间属性

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

我认为这就是你之后......

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

Html视频播放列表

1 个答案: