상세 컨텐츠

본문 제목

video progressbar disable, Video 태그 진행바 클릭안되게 하기

IT공부방/jQuery, ajax, java

by 동해둘리 2019. 3. 6. 16:07

본문

반응형

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<style type="text/css">
    html, body { height:100%; overflow: hidden; }
    body { margin:0px; }
</style>
</head>

<script src="/js/jquery-1.11.2.min.js"></script>

<BODY style="margin:0px 0px 0px 0px;">

<script type="text/javaScript">
$(document).ready(function(){

    var video = document.getElementById('video_player');
    var supposedCurrentTime = 0;
    video.addEventListener('timeupdate', function() {
    if (!video.seeking) {
            supposedCurrentTime = video.currentTime;
    }
    });
    // prevent user from seeking
    video.addEventListener('seeking', function() {
    // guard agains infinite recursion:
    // user seeks, seeking is fired, currentTime is modified, seeking is fired, current time is modified, ....
    var delta = video.currentTime - supposedCurrentTime;
    if (Math.abs(delta) > 0.01) {
        console.log("Seeking is disabled");
        video.currentTime = supposedCurrentTime;
    }
    });
    // delete the following event handler if rewind is not required
    video.addEventListener('ended', function() {
        // reset state in order to allow for rewind
// 동영상 시청이
    });

});
</script>


<div style="width: 100%; height: 100%; position: absolute;">
    <video style="min-width:400px; min-height:350px; width: 100%; height:100%;" id="video_player" poster="/images/bg_play_nexen.png" class="video-js" controls preload="auto" data-setup="" autoplay>
        <source data-res="1024" id="sVideo01" src="동영상주소" type='video/mp4'>
        <p class="vjs-no-js">해당 브라우저에서는 동영상을 재생할 수 없습니다.</p>   
    </video>
</div>


</body>
</html>




아래 사이트를 참조하였습니다

https://stackoverflow.com/questions/11903545/how-to-disable-seeking-with-html5-video-tag




반응형

관련글 더보기

댓글 영역