Question

我需要在渲染视频的同时运行一些业务逻辑。逻辑与视频的帧映射。因此，为了以实际帧频播放视频，我使用了以下自定义逻辑，

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <video id="frame_img" class="frame_img" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    <button id='play' class='play' title='play' accesskey="P">Play</button>
    <button id='pause' class='pause' title='pause' accesskey="P">Pause</button>
    <script src="https://code.jquery.com/jquery-2.2.0.js"></script> 
    <script type="text/javascript">
        $(document).ready(function(){               
            var play_handle;
            function playVideo()
            {
              play_handle = setInterval(function(){

                $(".frame_img")[0].currentTime = $(".frame_img")[0].currentTime + 0.040;
                console.log($(".frame_img")[0].currentTime);
              },40); 
            }

            function pauseVideo()
            {
              clearInterval(play_handle);
            }

            jQuery(document).ready(function($) {
              $("#play").on('click',function(){
                // alert("I will Play the video");
                playVideo();
              });

              $("#pause").on('click',function(){
                // alert("I will Pause the video");
                pauseVideo();

              });
            });
        });

    </script>
</body>
</html>

这里发生的是，单击“播放”后，视频开始播放，但在此之间停了一段时间，然后又开始播放。对于我的长片，它在这之间停了几次。我没有得到停止视频渲染的原因。请帮助我确定我在业务逻辑中的错误。

HTML5视频在两者之间暂停

0 个答案: