0

私のページには、どのリンクが押されたかに応じてビデオを再生するビデオプレーヤーがあります。

別のボタンに基づいてビデオの特定の部分にスキップできるように、これを作成しようとしています。

これまでのところ、両方を別々のページで作業しています。これが私がこれまでに持っているものです：

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

1 に答える 1

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>
于 2013-03-16T03:55:39.857 に答える