Question

I was wondering if it is possible to extract the controls of a video. I mean that instead of being the controls on top of the video, that these were separate and that the video could be controlled from there. Thank you in advance.

Answer 1

我知道你可以通过而不是设置属性controls来禁用浏览器的控件。见https://www.w3schools.com/TAgs/att_video_controls.asp

然后，您可以通过向要用于控制播放的UI元素添加事件处理程序来定义自己的自定义控件。

function playBtnHandler(event) {
  myVideo.play();
}

myBtn.addEventListener("click", playBtnHandler);

Answer 2

你可以试试这个...............

<script type="text/javascript">

        function vidplay() {
           var video = document.getElementById("Video1");
           var button = document.getElementById("play");
           if (video.paused) {
              video.play();
              button.textContent = "||";
           } else {
              video.pause();
              button.textContent = ">";
           }
        }

        function restart() {
            var video = document.getElementById("Video1");
            video.currentTime = 0;
        }

        function skip(value) {
            var video = document.getElementById("Video1");
            video.currentTime += value;
        }      
    </script>

    </head>
    <body>        

    <video id="Video1" autoplay>
    //  Replace these with your own video files. 
         <source src="1.mp4" type="video/mp4" />

         <a href="1.mp4">Download the video</a> file.
    </video>

    <div id="buttonbar">
        <button id="restart" onclick="restart();">[]</button> 
        <button id="rew" onclick="skip(-10)">&lt;&lt;</button>
        <button id="play" onclick="vidplay()">&gt;</button>
        <button id="fastFwd" onclick="skip(10)">&gt;&gt;</button>
    </div>

Extract controls from HTML video

2 个答案: