自定义停止按钮HTML5视频

自定义停止按钮HTML5视频,html,video,controls,custom-controls,html5-video,Html,Video,Controls,Custom Controls,Html5 Video,所以我尝试用自定义控件制作一个小视频,这是第一次,所以我不知道我在做什么。但我不能让暂停推杆发挥作用,但我该怎么做一个停止按钮呢 我的代码: 视频播放器: <div class="videobox"> <video id="video" width="100%" height="100%"> <source src="testvideo.m4v" type="video/mp4"> <p> Your

所以我尝试用自定义控件制作一个小视频,这是第一次,所以我不知道我在做什么。但我不能让暂停推杆发挥作用,但我该怎么做一个停止按钮呢

我的代码:

视频播放器:

<div class="videobox">
    <video id="video" width="100%" height="100%">
      <source src="testvideo.m4v" type="video/mp4">
      <p>
        Your browser doesn't support HTML5 video.
      </p>
    </video>
</div>


您的浏览器不支持HTML5视频。

还有我的控制

<div class="buttonrow">
    <input type="range" id="seek-bar" value="0">
    <button type="button" id="play-pause" class="play">Play</button>
    <button type="button" id="mute">Mute</button>
    <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
    <button type="button" id="full-screen">Full-Screen</button>
</div>

玩
哑巴
全屏
希望有人能帮助我:)

HTML
希望这有帮助

我可以看出你的例子是音频,视频也是这样吗?:)您可以为视频集成相同的逻辑。-@用户2354493我建议您从源代码中进行排列,看看它是否适合您。-@Legarndarymy的解决方案是这样的:stopButton.addEventListener(“单击”,函数(){video.pause();video.currentTime=0;playButton.innerHTML=“播放”});
<input type="button" value="play" id="playBtn" />
<input type="button" value="pause" id="pauseBtn" />
<input type="button" value="stop" id="stopBtn" />