为什么我不能跳过帧或无法在自定义视频播放器上搜索? HTML和Javascript

时间:2019-05-02 07:03:50

标签: javascript html5 html5-video

如何跳过自定义视频播放器上的帧?现在我有这个自定义视频。并且它有一个橙色的栏(例如进度栏),可以在持续时间内向前移动,但问题是我无法跳过帧。

如何使用自定义vid播放器跳过帧?这就是我的密码中的内容

HTML

<div class="container"> <!--Holds the Video-->
        <div class="c-video">
            <video class="video" src="images/videoplayback.mp4"></video>
            <div class="controls"> <!--Make it all a custom controls like play pause  vol etc for the video player-->
                <div class="orange-bar"> <!--Oranger Bar Holder-->
                    <div class="orange-juice"></div> <!--Seek Bar made it like a progress bar-->
                </div>
                <div class="buttons"> 
                    <button id="play-pause"></button>
                </div>
            </div>
        </div>
    </div>

JavaScript

var video = document.querySelector('.video');
var juice = document.querySelector('.orange-juice');
var btn = document.getElementById('play-pause');

function togglePlayPause(){
    if (video.paused) {
        btn.className = "pause";
        video.play();
    }else{
        btn.className = "play";
        video.pause();
    }
}

//Play the video player

btn.onclick = function(){
    togglePlayPause();
};


//When play button click, the orange bar will move forward, acting like the progress bar 

video.addEventListener('timeupdate', function(){
    var juicePos = video.currentTime / video.duration; 
    juice.style.width = juicePos * 100 + "%";

//When the video ends the pause button will change to play

    if (video.ended) {
        btn.className = "play";
    }

});
//Trying to make the seek bar or trying to skip frame  

function vidSeek(){
    var seekto = video.duration * (juice.value / 100);
    video.currentTime = seekto;
}

0 个答案:

没有答案